React列表中单选按钮异常（可多选）的修复咨询

你的单选按钮表现得像复选框，核心问题是同一组单选按钮缺少统一的name属性，另外还有状态更新和选中状态绑定的问题，具体修复步骤如下：

1. 给所有单选按钮添加相同的name属性 #

浏览器通过name属性识别同一组单选按钮，只有同name的单选按钮才会触发互斥逻辑。

2. 修正value和checked属性 #

• value应该设置为每个自由职业者的唯一标识（比如val.uid），而非整个状态对象
• 通过checked属性绑定状态，判断当前项是否被选中，保证UI和状态同步

3. 修复状态更新的不可变问题 #

直接修改原state对象（let acc = assignedfreelancer）会导致React无法检测到状态变化，需要创建新对象来更新。

修改后的完整代码 #

// 状态定义保持不变
const [assignedfreelancer, setAssignedFreelancer] = useState({
  freelancerId: "",
  freelancerName: ""
}) 

// 渲染部分修改
<Form>
  {freelancerArray.map((val, index) => (
    <div className="d-flex gap-4 r-div" key={index}>
      <Form.Check 
        type="radio"
        name="assignedFreelancer" // 统一的name属性
        aria-label={`select-freelancer-${index}`} 
        onChange={(e) => {
          if (e.target.checked) {
            // 创建新对象，遵循不可变原则
            setAssignedFreelancer({
              freelancerId: val.uid,
              freelancerName: `${val.name.firstname} ${val.name.lastname}`
            })
          }
        }}
        value={val.uid} // 用唯一标识作为value
        checked={assignedfreelancer.freelancerId === val.uid} // 绑定选中状态
      />
      <div className="d-flex gap-3">
        <div className="profile-image-div mt-1">
          <img src={val.freelancerPhotoUrl} alt={`${val.name.firstname} ${val.name.lastname}`} className="profile-image"/>
        </div>
        <p className="mt-08 mb-0">{val.name.firstname} {val.name.lastname}</p>
      </div>
    </div>
  ))}
</Form>

关键说明 #

• 统一name后，浏览器会自动处理单选互斥逻辑
• 用val.uid作为value，能精准匹配选中项
• 通过checked绑定状态，确保UI始终和state保持一致
• 状态更新时创建新对象，保证React能正确触发重渲染

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