React中状态变量变化时如何重新渲染单选框输入组件？

要实现点击Next按钮后radio输入框无选中项，核心是把radio设置为受控组件，由状态控制选中状态，同时确保切换题目时未回答的题目不会有选中项。

具体修改步骤 #

1. 给每个radio添加checked属性，判断当前题目（对应count）的答案是否等于该radio的value：
   比如第一个radio的checked属性设置为checked={answers[count] === 'a'}，其他三个radio同理对应'b'、'c'、'd'。

2. 这样处理后，当点击Next按钮切换题目（count递增）时，如果新题目还未选择答案（answers[新count]不存在），所有radio都会处于未选中状态，完全符合需求；同时返回之前的题目时，还能保留用户之前的选择，体验更友好。

修改后的代码片段（核心部分） #

<li className="pb-3">
  <input
    type="radio"
    name="answer"
    value={'a'}
    onChange={(e) => handleChange(e)}
    checked={answers[count] === 'a'}
  />
  {' a) '}
  {questions[count].answers[0].a}
</li>
<li className="pb-3">
  <input
    type="radio"
    name="answer"
    value={'b'}
    onChange={(e) => handleChange(e)}
    checked={answers[count] === 'b'}
  />
  {' b) '}
  {questions[count].answers[0].b}
</li>
<li className="pb-3">
  <input
    type="radio"
    name="answer"
    value={'c'}
    onChange={(e) => handleChange(e)}
    checked={answers[count] === 'c'}
  />
  {' c) '}
  {questions[count].answers[0].c}
</li>
<li className="pb-3">
  <input
    type="radio"
    name="answer"
    value={'d'}
    onChange={(e) => handleChange(e)}
    checked={answers[count] === 'd'}
  />
  {' d) '}
  {questions[count].answers[0].d}
</li>

额外说明 #

你提到的useEffect其实在这里不需要，因为通过受控组件的方式就能直接实现需求。如果非要用useEffect来强制清除选中状态（比如切换题目时即使有之前的选择也清除），可以添加如下代码，但不推荐，会破坏返回题目的记忆功能：

useEffect(() => {
  // 每次count变化时，清除当前题目的答案
  setAnswers(prev => ({ ...prev, [count]: undefined }));
}, [count]);

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