React中useState布尔值更新滞后导致逻辑错误的修复咨询

问题根源 #

React的useState更新是异步批量处理的——你在HandleRadioClick里调用setMyBoolean(true)后，myBoolean的状态不会立刻同步更新。在同一个generate2函数的执行周期里，后续的条件判断依然会使用更新前的旧值false，这就是逻辑不生效的原因。

修复方案 #

不要依赖myBoolean的state做即时判断，直接从单选按钮的选中状态里获取当前结果，或者让HandleRadioClick返回是否选中了Option1，用这个即时值执行后续逻辑。同时保留setMyBoolean的调用，供其他依赖该state的逻辑使用。

修改后的代码：

function Setup() {
  const [myBoolean, setMyBoolean] = useState(false);

  useEffect(() => {
    console.log(myBoolean);
  }, [myBoolean]);

  // 修改HandleRadioClick，返回是否选中Option1
  function HandleRadioClick() {
    let isOption1Checked = false;
    const radioButtons = document.getElementsByName("radio1");
    for (let i = 0; i < radioButtons.length; i++) {
      const radioButton = radioButtons[i] as HTMLInputElement;

      if (radioButton.checked) {
        const id = radioButton.id;
        const option = id.substr(id.length - 7);
        switch (option) {
          case "Option1":
            console.log("Pressed the first Radio Button");
            isOption1Checked = true;
            setMyBoolean(true); // 保留state更新，供其他逻辑使用
            break;
          case "Option2":
            isOption1Checked = false;
            setMyBoolean(false);
            break;
          case "Option3":
            isOption1Checked = false;
            setMyBoolean(false);
            break;
          default:
            console.error("Unrecognized option:", option);
            isOption1Checked = false;
            break;
        }
      }
    }
    return isOption1Checked;
  }

  const generate2 = () => {
    // 直接获取当前选中状态，不用等state更新
    const isOption1Selected = HandleRadioClick();
    const inputColor = hexValues.get(0);
    const lightColorPalette = calculateLightColorPallette(inputColor);
    const darkColorPalette = calculateDarkColorPallette(inputColor);

    // 用即时获取的isOption1Selected判断，而非myBoolean
    if (isOption1Selected) {
      console.log("My Boolean is true");
      console.log(darkColorPalette);
      setPalettes({ light: lightColorPalette, dark: darkColorPalette });
    } else {
      console.log("My Boolean is false ");
      setPalettes((prevPalettes) => ({ ...prevPalettes, light: lightColorPalette }));
    }
  };

  return (
    <div>
      <button style={styles.button} onClick={generate2}>
        Generate
      </button>
    </div>
  );
}

额外说明 #

这种方式避开了React异步state更新的限制，因为我们直接从DOM获取了最新的选中状态，或者通过函数返回值传递了即时结果。如果组件其他部分需要依赖myBoolean的state，setMyBoolean的调用依然要保留，确保state和实际选中状态一致。

内容的提问来源于stack exchange，提问作者Mark likes Quark