React中RadioButton onChange异常：第二个选项首次点击不选中

问题根源 #

你的代码里每个TempRadio组件都独立维护了自己的checked状态，但同一组（比如"OS"组）的单选按钮属于同一个命名空间，应该共享同一个选中状态。当首次点击"Mac"时，只有对应TempRadio组件的checked被设为"Mac"，而同组其他组件的状态没有同步更新，导致React的状态与DOM渲染不同步，首次点击无法正常显示选中状态；再次点击时状态完成同步，才恢复正常。

修复方案 #

将单选按钮的状态提升到父组件，让同一组的所有单选按钮共享同一个状态，通过props传递选中值和变更回调，保证状态一致性。

修改后的完整代码 #

import './App.css';
import { useState } from 'react';

const options = ["Windows", "Mac", "Linux"]
const days = ["Male", "Female"]

const TempRadio = ({ item, group, selectedValue, onChange }) => {
  return (
    <label>
      <input 
        type="radio" 
        value={item} 
        checked={item === selectedValue} 
        name={group} 
        onChange={() => onChange(group, item)} 
      />
      {item}
    </label>
  )
}

function App() {
  // 用对象存储不同分组的选中状态，key为分组名，value为当前选中值
  const [selectedValues, setSelectedValues] = useState({});

  const handleRadioChange = (group, value) => {
    setSelectedValues(prev => ({
      ...prev,
      [group]: value
    }));
  };

  const renderItems = (items, group) => {
    return (
      <div className='myul'>
        {items.map((item) =>
          <TempRadio 
            item={item} 
            key={item} 
            group={group} 
            selectedValue={selectedValues[group]} 
            onChange={handleRadioChange} 
          />
        )}
      </div>
    )
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Which OS?</h1>
        {renderItems(options, "OS")}
        <h2>Gender</h2>
        {renderItems(days, "time")}
      </header>
    </div>
  );
}

export default App;

关键改动说明 #

• 状态集中管理：把原本分散在每个TempRadio的checked状态，合并到父组件的selectedValues对象中，同一组单选按钮共享同一个状态源，避免状态不一致。
• 统一事件回调：父组件的handleRadioChange方法负责更新对应分组的选中值，子组件只需要触发回调，无需处理状态逻辑，符合React单向数据流原则。
• 纯展示组件：TempRadio变为纯函数组件，仅根据props渲染内容，没有内部状态，提升组件复用性和可维护性。

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