React.js中setState存储下拉选择值失效问题求助

嘿，我一眼就看出问题所在了——这是React setState的异步特性在搞怪！

问题根源 #

你在handleChange里调用this.setState({ size: event.target.value })之后，立刻就去打印this.state.size，还基于它判断posterDiv的取值。但setState并不是同步更新状态的，React会把状态更新操作放进队列，等合适的时机批量执行，所以这时候你拿到的this.state.size还是更新前的旧值，后面的if判断自然也走不对分支，导致posterDiv的更新不符合预期。

修复方案 #

我们可以先把选中的下拉值存到变量里，直接基于这个变量计算posterDiv，然后一次性更新两个状态。如果需要在状态更新完成后做操作（比如打印最新状态），就用setState的第二个参数——回调函数，它会在状态更新完成后执行，能拿到最新的state。

修改后的handleChange函数如下：

handleChange = (event) => {
  const selectedSize = event.target.value;
  console.log("the value is " + selectedSize);
  
  // 先根据选中值计算posterDiv
  let newPosterDiv;
  if (selectedSize === "Medium") {
    newPosterDiv = "700px";
  } else if (selectedSize === "Full") {
    newPosterDiv = "100%";
  } else {
    newPosterDiv = "800px";
  }
  
  // 一次性更新size和posterDiv
  this.setState({ 
    size: selectedSize,
    posterDiv: newPosterDiv 
  }, () => {
    // 回调函数里可以拿到最新的状态
    console.log("updated size = " + this.state.size);
    console.log("updated posterDiv = " + this.state.posterDiv);
  });
};

额外提醒 #

• 永远不要在调用setState后立即访问this.state，因为此时状态还没更新。
• 如果你的新状态依赖旧状态（比如count: prevState.count + 1），要使用函数式更新的方式：this.setState(prevState => ({ count: prevState.count + 1 }))，这样能确保拿到的是最新的旧状态。
• 尽量合并setState的调用，减少组件不必要的重渲染次数。

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