React中setState无法即时更新？按钮更新数组滞后问题求助

嘿，这个问题我太熟啦！你遇到的其实是React核心特性里的小坑——setState是异步操作，咱们一步步说清楚：

为什么会滞后？ #

React为了优化性能，不会在你调用setState后立刻更新组件的state，而是会把这些更新请求放进一个队列里，等合适的时机批量处理。所以你在调用setState之后马上打印this.state.allInterest，拿到的其实还是更新前的旧值，这就导致了“点击后数组没更新，下一次点击才显示上一次结果”的滞后现象。

比如你的代码大概是这样的（补全你给出的片段）：

export default class Test extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      allInterest: []
    };
  }

  handleClick = (e) => {
    const btnId = e.target.id;
    this.setState({
      allInterest: [...this.state.allInterest, btnId]
    });
    // 这里打印的是更新前的旧state，所以首次点击是空数组
    console.log(this.state.allInterest);
  }

  render() {
    return (
      <div>
        <button id="btn1" onClick={this.handleClick}>按钮1</button>
        <button id="btn2" onClick={this.handleClick}>按钮2</button>
      </div>
    );
  }
}

当你第一次点击按钮，setState告诉React要更新数组，但React还没来得及修改this.state，你就立刻打印了，所以输出是空；等你第二次点击时，上一次的更新已经完成，这时候打印的就是第一次点击的结果，以此类推。

怎么解决？ #

有两个靠谱的办法，看你的场景选：

1. 用setState的回调函数 #

setState支持第二个参数——一个回调函数，这个函数会在state更新完成、组件重新渲染后执行。你可以在这里放心地读取更新后的state：

handleClick = (e) => {
  const btnId = e.target.id;
  this.setState({
    allInterest: [...this.state.allInterest, btnId]
  }, () => {
    // 这里拿到的绝对是更新后的最新数组
    console.log(this.state.allInterest);
  });
}

2. 函数式更新（推荐！） #

如果你的新state依赖于前一次的state值（比如像你这样往数组里加元素），更推荐用函数式的setState。它会把前一次的state作为参数传给你，你返回新的state就行。这种方式能避免异步更新带来的state值不准确问题：

handleClick = (e) => {
  const btnId = e.target.id;
  this.setState(prevState => ({
    allInterest: [...prevState.allInterest, btnId]
  }), () => {
    console.log(this.state.allInterest);
  });
}

哪怕React在批量处理更新，prevState也总能拿到最新的前一次state，保证你的更新逻辑不会出错。

最后总结一下 #

核心就是记住：setState是异步的，不要在调用它之后立刻读取state。要么用回调函数等更新完成，要么用函数式更新来依赖前一次state。这样就能解决滞后的问题啦！

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