调用setState后状态未更新，回调中仍显示旧状态求助

我之前也碰到过一模一样的诡异情况！咱们来一步步拆解可能的原因，找到解决办法：

1. 先排查最常见的坑：新状态和旧状态引用相同 #

React的setState会做浅比较，如果你传入的新emailAddresses和当前state里的是同一个引用（比如数组/对象被原地修改后返回），React会认为状态没有变化，不会更新state，自然回调里打印的还是旧值。

看看你的arrangeEmailAddresses函数是不是犯了这个错：

• 错误示例（原地修改原数组，返回原引用）：

function arrangeEmailAddresses(data) {
  const addresses = this.state.emailAddresses;
  addresses.push(...data); // 原地修改原数组
  return addresses;
}

• 正确做法（返回新的数组/对象引用）：

function arrangeEmailAddresses(data) {
  // 用展开运算符创建新数组
  return [...this.state.emailAddresses, ...data];
  // 或者用map/filter等返回新数组，取决于你的排序逻辑
}

2. 改用函数式更新确保基于最新state计算 #

有时候因为setState的异步特性，如果之前有未完成的state更新，直接传入对象可能会基于过时的state计算新值。改成函数式更新可以避免这个问题：

this.setState(prevState => {
  const arrangedSenderEmailAddresses = arrangeEmailAddresses(response.data.data);
  // 或者把prevState.emailAddresses传给arrange函数确保计算准确
  return { emailAddresses: arrangedSenderEmailAddresses };
}, () => {
  console.log('state after update: ', this.state.emailAddresses);
});

3. 检查_isMounted标志位的正确性 #

虽然你的update data日志打印出来了，说明_isMounted是true，但还是要确认这个标志位的逻辑是否正确：

• 必须在componentDidMount中设置this._isMounted = true
• 必须在componentWillUnmount中设置this._isMounted = false
  如果这个标志位没有正确更新，可能会导致组件卸载后还执行setState，虽然回调可能会执行，但state不会更新（因为组件已经卸载了）。

4. 排查是否有其他代码篡改了state #

有没有其他地方的setState或者直接修改state（非常不推荐的操作）在这个更新之后把emailAddresses改回旧值？比如有没有定时器、其他异步请求的回调在后面修改了这个状态？

你可以在组件里加一个componentDidUpdate钩子，打印每次state变化的情况，看看是不是有其他操作覆盖了你的更新：

componentDidUpdate(prevProps, prevState) {
  if (prevState.emailAddresses !== this.state.emailAddresses) {
    console.log('emailAddresses updated to: ', this.state.emailAddresses);
  }
}

先从第一个原因开始排查，这是最容易踩的坑！我当时就是因为在处理数组的时候原地修改，导致setState完全没生效，折腾了好久😂

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