反应：组件状态不更新记分员或计数器

Question

每当我在四个选项中单击正确或错误的“答案”div 时，我都会尝试更新我的组件状态，以更新记分员和计数器。但是，当我控制台注销记分员和计数器值时，无论我回答了多少问题，我总是得到 0。为什么会发生这种情况，如何更新这两个组件状态？

这是我的代码：

export default class QuestionCard extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            scorekeeper: 0, 
            counter: 0,
            hideDiv: false
        }

        this.handleClick = this.handleClick.bind(this);
        this.handleClickCont = this.handleClickCont.bind(this);
    }

    handleClick(choice) {
        if(this.state.counter === 4) {
            return console.log('we have four')
        }

        this.handleClickCont(choice)
    }

    handleClickCont(choice) {
        if(choice === this.props.answer) {
            this.setState({scorekeeper: this.state.scorekeeper + 1});
            this.setState({counter: this.state.counter + 1});
            console.log('scorekeeper ' + this.state.scorekeeper)
            console.log('counter ' + this.state.counter)
            return this.setState({hideDiv: !this.state.hideDiv});
        } 

        this.setState({scorekeeper: this.state.scorekeeper - 1});
        this.setState({counter: this.state.counter + 1});
        console.log('scorekeeper ' + this.state.scorekeeper);
        console.log(this.state.counter)
        this.setState({hideDiv: !this.state.hideDiv});
    }

    render() {
        return (
            <div style={{margin: '20px', display: this.state.hideDiv ? 'none' : 'block'}}>
                <div>
                    {this.props.question}
                </div>

                <div style={{
                        margin: '20px', 
                        width: '500px', 
                        display: 'flex', 
                        justifyContent: 'space-around',
                        display: this.state.hideDiv ? 'none' : 'block'
                      }}>
                    <div onClick={() => this.handleClick(this.props.choice1)}>
                        {this.props.choice1}
                    </div>
                    <div onClick={() => this.handleClick(this.props.choice2)}>
                        {this.props.choice2}
                    </div>
                    <div onClick={() => this.handleClick(this.props.choice3)}>
                        {this.props.choice3}
                    </div>
                    <div onClick={() => this.handleClick(this.props.choice4)}>
                        {this.props.choice4}
                    </div>
                </div>
            </div>
        );
    }
}

Answer 1

设置状态是异步的，因此 react 可以通过批量调用 setState 来做一些性能优化。因此，依赖于先前状态值的状态更改（即用于递增计数器）您应该使用setState 的函数版本 https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

您在调用 setState 后立即记录，但由于它是异步的，因此您正在记录的状态可能 实际上 还没有被 react 设置。您可以改为将其记录在回调中，保证在状态实际上已在表面下更新后运行

顺便说一句，如果答案正确与否，您的代码的作用完全相同，只是它增加而不是减少分数，因此我们可以将其稍微干燥到单个 setState 中，并带有条件增量值

handleClickCont(choice) {
  this.setState(prevState => ({
      scorekeeper: prevState.scorekeeper + (choice === this.props.answer ? 1 : -1),
      counter: prevState.counter + 1,
      hideDiv: !prevState.hideDiv
    }),
    () => { // callback, guaranteed to have done your updates by this point
      console.log('scorekeeper ' + this.state.scorekeeper)
      console.log('counter ' + this.state.counter)
    }
  )
}

Answer 2

记住 this.setState 就像 return 语句。可能不会执行 setstate 之后的所有语句。一旦你设置了组件的渲染方法就会被调用，除非你指定不渲染。更进一步的语句可能不会被执行。

handleClickCont(choice) {
    if(choice === this.props.answer) {
        this.setState({scorekeeper: this.state.scorekeeper + 1,counter: this.state.counter + 1,hideDiv: !this.state.hideDiv});
    } else{

    this.setState({scorekeeper: this.state.scorekeeper - 1,counter: this.state.counter + 1,hideDiv: !this.state.hideDiv});
    }

}

你也不能返回 this.setState。调用 setState 时也不总是执行它。 react 可能会对其进行批处理并稍后执行。