状态变更时Virtual DOM与Real DOM问题：setState后console.log显示空数组

兄弟，这坑我踩过好多次！你碰到的核心问题是React类组件中的setState是异步操作——它不会立刻更新组件的状态，而是把状态更新请求放进队列，等合适的时机批量处理。所以你在setState之后马上console.log，拿到的还是更新前的旧状态，自然显示空数组。

怎么解决？给你两个靠谱方案： #

方案1：用setState的回调函数

setState支持第二个参数，这是一个回调函数，它会在状态更新完成、组件重新渲染后执行，这时候你就能拿到最新的状态了。修改你的代码：

let text = reminderText; // 假设这里的reminderText是你要添加的目标内容
let data = [...this.state.reminderText];
data.push(text);
this.setState({ reminderText: data }, () => {
  // 在这里log，确保拿到最新状态
  console.log(this.state.reminderText);
});

方案2：用componentDidUpdate生命周期钩子

如果你的逻辑需要在状态变更后持续执行（不止这一次），可以用类组件的componentDidUpdate钩子。它会在组件更新完成后触发，记得要对比新旧状态，避免无限循环：

componentDidUpdate(prevProps, prevState) {
  // 只有当reminderText状态确实变化时才执行
  if (prevState.reminderText !== this.state.reminderText) {
    console.log(this.state.reminderText);
  }
}

另外提一句：你代码里用[...this.state.reminderText]复制数组的做法非常正确！React要求状态是不可变的，直接修改原状态会导致组件无法感知变化而不重新渲染，这点你做得很到位👍

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