React setState 不能同时工作答案

【问题标题】：React setState does not work simultaneouslyReact setState 不能同时工作
【发布时间】：2021-07-24 05:19:21
【问题描述】：

我创建了 menuKey 状态来给每个菜单一个键值。

所以返回对象如下所示：

                    <div className = "big-frame">
                        <div className = "big" 
                        onClick = {()=>this.onClick(1)} 
                        >111</div>

                        <div className = "big" 
                        onClick = {()=>this.onClick(2)} 
                        >222</div>

                        <div className = "big" 
                        onClick = {()=>this.onClick(3)} 
                        >333</div>
                    </div>

state 和 onClick 如下所示：

        state = {
            showSmall: false,
            showCont: false,
            MenuKey: null,
            contKey:null,
        }

        onClick = (k) => {
            this.setState({MenuKey: k})
        }

当我将 console.log(k) 和 console.log(this.state.menuKey) 放入 onClick menuKey 显示上一个值例如，如果我单击 111、222、333，它在控制台中看起来像这样：

1
空

2
1

3
2

是什么原因造成的，如何解决？

【问题讨论】：

你必须在这里解决什么问题？更新状态是异步过程，因此不会立即发生。将 console.log 放在 useEffect 中以跟踪更新？
参考这个 --> codesandbox.io/s/elated-drake-52v7w?file=/src/App.js
你知道 setState 是异步的，不是吗？
您的代码看起来不错尝试登录componentDidUpdate 以触发更新
我想我当时缺乏知识，错过了componentDidUpdate // useEffect

标签： reactjs

【解决方案1】：

你应该像这样改变你的代码：

  componentDidUpdate() {
    console.log(this.state.MenuKey);
  }
  onClick = (k) => {
    const copy = { ...this.state };
    copy.MenuKey = k;
    this.setState({ copy });
  };

【讨论】：