React问题：为何需点击两次才能更新状态并调用函数？

问题根源 #

React的setState是异步操作，你在调用setState后立刻访问this.state，拿到的是更新前的旧状态值。第一次点击按钮时，getCOBs使用的是未更新的旧状态，导致逻辑不生效；第二次点击时，状态才完成更新，getCOBs拿到正确值，所以需要两次点击才能触发预期行为。

修复方案 #

把getCOBs的调用放到setState的回调函数中，同时合并多个setState调用（减少异步更新次数，提升性能）：

handleTypeChange(event) {
  const selectedValue = event.target.getAttribute('value');
  let filtercommercial = 'False';
  let filterpackage = 'False';

  // 根据选中值设置状态变量
  if (selectedValue === "Commercial") {
    filtercommercial = 'True';
  } else if (selectedValue === "Package") {
    filterpackage = 'True';
  }

  // 合并所有状态更新，通过回调确保状态更新完成后再调用getCOBs
  this.setState({
    filtertype: selectedValue,
    filtercommercial,
    filterpackage
  }, () => {
    // 此处this.state已经是最新的更新后状态
    getCOBs(this.state.filtercommercial, this.state.filterpackage).then(populateCOBDropdown);
  });
}

关键说明 #

• 合并多个setState调用：React会批量处理多个setState，合并成一次更新，避免不必要的组件重渲染。
• 使用setState的回调函数：该回调会在状态更新完成、组件重新渲染后执行，此时访问this.state能拿到最新的状态值，确保getCOBs使用正确的参数调用。

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