React中setState更新数组不生效问题及相关写法有效性咨询

1. setState调用后立刻打印获取不到最新值的成因 #

React 中的 setState 是异步批量执行的，调用 setState 时 React 不会立刻同步修改 this.state 的值，而是会先把这次状态更新加入更新队列，等待当前函数所有同步代码执行完成、当前事件循环周期结束后，才会合并所有状态更新、修改 this.state 并触发组件重渲染。
你在 setState 后立刻执行 console.log(this.state.interfaceOptions) 时，状态更新还没有执行，拿到的还是更新前的旧值，如果你的 interfaceOptions 初始默认值是空数组，这里自然就会打印空数组。
如果需要在状态更新完成后拿到最新值，可以使用 setState 的第二个回调参数，示例如下：

this.setState({
  interfaceOptions: interfaceOptionsWithTitle
}, () => {
  // 回调会在状态更新完成、重渲染结束后触发，可拿到最新状态
  console.log(this.state.interfaceOptions)
})

2. 直接给this.state赋值的写法不可行 #

你给出的第二种写法是错误的，绝对不要直接修改 this.state：

• 直接修改 this.state 不会触发 React 的重渲染逻辑，界面中依赖这个状态的内容不会同步更新
• 后续 React 执行其他 setState 操作时，你直接修改的状态值可能会被覆盖，导致状态出现不可预期的问题

修改状态的唯一合法方式就是调用 setState 方法，你第一种写法里的 setState 更新逻辑是正确的，仅需调整打印位置即可。

内容的提问来源于stack exchange，提问作者rudeTool