调用this.setState({query:value})后this.state.query仍未设置的问题

这是React里一个超级常见的坑——setState 是异步操作！你调用 this.setState() 之后，React并不会立刻更新 this.state，而是会把这次更新加入到更新队列中，等当前事件循环结束后再批量处理更新。所以你在 setState 之后马上用 alert 访问 this.state.query，拿到的其实还是更新前的旧值，自然和预期不符。

给你几个可行的解决办法：

1. 使用 setState 的回调函数 #

setState 支持第二个参数，这是一个在状态更新完成、组件重新渲染后才会执行的回调函数。在这个回调里访问 this.state，就能拿到最新的状态了：

handleInput(event) {
  this.setState({ query: event.target.value }, () => {
    // 这里的state已经是更新后的了
    alert("setting query to " + this.state.query);
  });
}

2. 直接使用输入框的当前值 #

既然 event.target.value 是同步获取到的输入内容，你也可以直接用这个值来做提示，不用依赖 state：

handleInput(event) {
  const inputValue = event.target.value;
  this.setState({ query: inputValue });
  alert("setting query to " + inputValue);
}

3. 函数式更新（针对依赖旧状态的场景） #

如果你的新状态需要基于旧状态计算（比如在原有query后追加内容），推荐用函数式更新的写法，确保拿到的是最新的旧状态：

handleInput(event) {
  this.setState(prevState => ({
    query: prevState.query + event.target.value
  }), () => {
    alert("setting query to " + this.state.query);
  });
}

简单总结一下：别指望调用 setState 后立刻拿到新状态，要么用回调，要么直接用同步获取到的输入值，要么用函数式更新处理依赖旧状态的场景。

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