在ComponentDidUpdate中出现奇怪的条件行为。

Posted 2021-03-27

我在玩javascript和react时遇到了一个奇怪的情况。

async componentDidUpdate(previousProps, previousState) {
    console.log(previousState.questionNo,this.state.questionNo);
    console.log(!previousState.questionNo === this.state.questionNo)
    if (!previousState.questionNo === this.state.questionNo) {
            console.log("I'm here")
            const index = Math.floor(Math.random() * 12); //12 is hardcoded i need to find sth better later
            const resp = await questionsApi.get(`/questions/${index}`);
            this.setState({ question: resp.data });
        }
    }

当我在控制台检查时，即使值不相等，组件也没有渲染。而且在控制台 console.log(!previousState.questionNo === this.state.questionNo) 笨拙地总是提供false。

控制台输出如下。

1 1 Component.js:16
false Component.js:17
1 2 Component.js:16
false component.js:17

任何想法是怎么回事？

谅谅

答案

替换

if (!previousState.questionNo === this.state.questionNo)

由

if (previousState.questionNo !== this.state.questionNo)

这是因为做 !previousState.questionNo 会将该值转换为布尔值(大部分为 false)，它永远不会等于 this.state.questionNo 如同 1, 2诸如此类