React中map循环渲染列表时onChange更新state异常问题咨询

问题根因 #

• 所有输入框共用了同一个text状态，没有和每个answer自身的text属性绑定，修改任意输入框都会覆盖全局唯一的状态值，导致所有输入框同步更新
• 遍历渲染answer项时没有设置唯一key属性，React虚拟DOM Diff时无法正确识别节点更新，会引发渲染异常
• 状态没有按answers数组维度存储，无法区分不同输入框对应的内容

解决步骤 #

1. 调整状态结构 #

不要用单个字符串状态存文本，改为存储整个question对象（或者单独存answers数组），这样可以对应修改每个answer的text：

// 初始question对象为你提供的数组内的题目结构
const [question, setQuestion] = useState(初始question对象)

2. 重写onChange事件处理函数 #

调用时传入当前修改的answer的id，找到对应项更新其text值：

const answerText = (event, answerId) => {
  const inputValue = event.target.value;
  setQuestion(prevQuestion => {
    return {
      ...prevQuestion,
      answers: prevQuestion.answers.map(answer => {
        // 仅更新当前操作的answer对应文本
        if(answer.id === answerId) {
          return {...answer, text: inputValue}
        }
        return answer
      })
    }
  })
}

3. 调整渲染逻辑 #

• 给遍历的最外层节点加唯一key属性
• 输入框的value绑定对应answer自身的text属性
• 调用onChange时传入当前answer的id，同时避免多个输入框id重复

{question.answers &&
  question.answers.map((answer) => (
    <div key={answer.id}>
      <div>
        <input type="checkbox" name="test" checked={answer.is_answer} />
      </div>
      <div>
        <input
          id={`input-answer-${answer.id}`}
          label="Answer"
          onChange={(event) => answerText(event, answer.id)}
          value={answer.text}
        />
      </div>
    </div>
  ))}

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