React受控单选按钮组问题：修改其他组值仅更新第一组

问题出在你所有单选按钮共用了同一个name属性，而且option状态是单个值——浏览器会把同name的单选按钮当成一组，选第二个成员的选项时会自动取消第一个的选中状态，同时单个状态变量也没法区分不同成员的选择，导致看起来只有第一个成员的状态在更新。

1. 重构状态存储 #

把单个option改成对象或数组，用来对应每个成员的选择状态，比如：

// 假设members是你的成员数组，初始化每个成员默认状态为Not Attending
const [options, setOptions] = useState(
  members.reduce((acc, _, idx) => {
    acc[`member${idx+1}`] = 'Not Attending';
    return acc;
  }, {})
);

2. 给每组单选按钮设置独立的name #

用成员的索引或唯一ID作为name的后缀，确保每组单选按钮相互独立，不会互相干扰：

{members.map((member, index) => (
  <tr key={index}>
    <td>{member.name}</td>
    {/* Attending选项 */}
    <td>
      <input
        type="radio"
        name={`attendance-${index}`}
        value="Attending"
        checked={options[`member${index+1}`] === 'Attending'}
        onChange={(e) => {
          setOptions(prev => ({
            ...prev,
            [`member${index+1}`]: e.target.value
          }));
        }}
      />
      Attending
    </td>
    {/* Tentative选项 */}
    <td>
      <input
        type="radio"
        name={`attendance-${index}`}
        value="Tentative"
        checked={options[`member${index+1}`] === 'Tentative'}
        onChange={(e) => {
          setOptions(prev => ({
            ...prev,
            [`member${index+1}`]: e.target.value
          }));
        }}
      />
      Tentative
    </td>
    {/* Not Attending选项 */}
    <td>
      <input
        type="radio"
        name={`attendance-${index}`}
        value="Not Attending"
        checked={options[`member${index+1}`] === 'Not Attending'}
        onChange={(e) => {
          setOptions(prev => ({
            ...prev,
            [`member${index+1}`]: e.target.value
          }));
        }}
      />
      Not Attending
    </td>
  </tr>
))}

3. 核心注意点 #

• 每个成员的单选按钮组必须有唯一的name，这是浏览器区分单选组的关键
• 状态要和成员一一对应，用对象/数组存储，不能用单个值
• 更新状态时要展开原有状态，避免覆盖其他成员的选择记录

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