ReactJS中radio单选按钮点击冻结无法切换问题排查与修复

错误原因 #

你当前所有单选框的checked属性完全以props中viewReviews.response的字段值为判断依据，但点击单选框触发的onChange事件只会修改组件内部的jobKnowledge、productivity等本地state，不会更新props对应的redux数据，所以checked的判断条件永远匹配初始加载的props值，导致单选框无法切换选中状态。

修复方案 #

在编辑场景下，优先选择将props的初始值同步到本地state，再把单选框的checked属性绑定到本地state即可，具体修改如下：

1. 新增useEffect钩子，在组件加载或props更新时把初始值同步到本地state：

useEffect(() => {
  // 兼容props未加载完成的情况
  if (!props.viewReviews?.response) return
  const { jobKnowledge, productivity, workQuality, skills } = props.viewReviews.response
  setJobKnowledge(jobKnowledge)
  setProductivity(productivity)
  setWorkQuality(workQuality)
  setSkills(skills)
}, [props.viewReviews])

2. 修改所有单选框的checked属性判断逻辑，从绑定props改为绑定对应的本地state：
   以Job Knowledge分组为例，修改后代码如下：

<label htmlFor="excellent_knowledge">
  <input
    type="radio"
    name="job_knowledge"
    id="excellent_knowledge"
    value="Excellent"
    checked={jobKnowledge === 'Excellent'}
    onChange={onJobKnowledgeChange}
    required
  />
  Excellent
</label>
<label htmlFor="good_knowledge">
  <input
    type="radio"
    name="job_knowledge"
    id="good_knowledge"
    value="Good"
    checked={jobKnowledge === 'Good'}
    onChange={onJobKnowledgeChange}
    required
  />
  Good
</label>
<!-- 其余Job Knowledge选项、Productivity/Work Quality/Technical Skills三个分组的所有单选框都按照相同逻辑修改，分别绑定productivity、workQuality、skills对应的state即可 -->

如果你的业务需求需要实时把单选修改结果同步到redux，也可以选择在onChange触发时直接dispatch对应的action修改redux数据，不需要维护本地state，checked属性继续绑定props字段即可。

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