React中Material UI单选按钮选中值为前一个值的问题

嘿，这个问题我太熟悉啦！核心原因是React的useState状态更新是异步的。

当你在handleChangeRadio里调用setRadioValue(value)时，React并不会立刻修改radioValue的取值——它会把这个更新操作加入到状态更新队列中，等当前的事件处理函数执行完毕、浏览器完成渲染之后，才会真正更新状态值。

所以你在setRadioValue之后马上console.log(radioValue)，拿到的自然还是更新前的旧值，这就是为什么切换选项时打印的总是上一个选中值。

两种解决方法 #

方法1：直接打印获取到的新值 #

既然event.target.value就是当前选中的最新值，你可以直接打印它，不需要依赖状态变量：

function handleChangeRadio(event) {
  const value = event.target.value;
  setRadioValue(value);
  console.log(value); // 这里打印的就是当前选中的最新值
}

方法2：用useEffect监听状态变化 #

如果你必须要基于更新后的radioValue做操作，可以用useEffect钩子监听radioValue的变化，当状态真正更新完成后再执行打印（或其他逻辑）：

// 新增useEffect监听
React.useEffect(() => {
  console.log(radioValue); // 状态更新后会触发这里的打印
}, [radioValue]); // 依赖项设置为radioValue，状态变化时执行

function handleChangeRadio(event) {
  const value = event.target.value;
  setRadioValue(value);
}

另外补充一句：你的RadioGroup组件本身的逻辑是没问题的，UI会正确同步选中状态，只是打印时机没选对而已～

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