React开发问卷时单题选radio会联动所有题目同步选中同选项的异常

• HTML原生radio控件的同组互斥逻辑完全依赖相同name属性做分组判定，当前实现没有为每道题的radio绑定和题目维度挂钩的独立name值，反而所有题的radio选中状态都直接绑定同一个全局的selectedOption变量，任意选项触发状态变更时，所有绑定该变量的radio都会命中相同的选中判定条件，出现跨题同步选中的问题。
• 状态粒度设计存在缺陷：原本属于单题维度的选中值被设计成了全局共享的单个标量值，没有按题目维度做状态隔离，50道题共用同一个存储选中值的内存空间，自然会出现一道题更新值、其余所有题的选中状态跟着同步变化的问题。
• 统一绑定的handleChange事件处理函数没有透传当前交互所属的题目唯一标识，触发状态更新时无法定位要修改的目标题目，只能无差别覆盖全局共享的选中值，从逻辑上也不支持单题独立存储选中结果。

核心调整点 #

• 重构状态结构：将原有的单个全局selectedOption替换为以题目唯一ID为key的对象结构，初始值为空对象，每道题的选中结果独立存储在对应key下，从结构上实现单题状态隔离。
• 补全radio分组属性：为每道题的所有radio input配置和题目ID绑定的独立name属性，例如name={question-${question.id}}，让原生radio的同组互斥逻辑正常生效，避免不同题的选项出现串组。
• 改造事件处理逻辑：在给radio绑定handleChange时透传当前题目的ID，触发变更时仅更新对应题目key下的选中值，不再无差别覆盖全局状态。
  参考核心代码片段：

  // 重构后的状态定义
  const [selectedAnswers, setSelectedAnswers] = useState({});
  // 改造后的事件处理
  const handleOptionChange = (questionId, optionValue) => {
    setSelectedAnswers(prev => ({
      ...prev,
      [questionId]: optionValue
    }))
  }
  // 单个radio的绑定示例
  <input
    type="radio"
    name={`question-${question.id}`}
    value={option.value}
    checked={selectedAnswers[question.id] === option.value}
    onChange={() => handleOptionChange(question.id, option.value)}
  />
  

• 列表渲染优化：不要在渲染列表时通过uuidv4实时生成随机值作为key，组件重渲染时动态生成的随机key会导致列表DOM状态丢失，直接使用题目数据源自带的稳定唯一ID作为列表渲染的key即可。

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