React问卷组件：如何在setState中更新同questionID的答案对象

嘿，这个问题我太熟了！之前做问卷组件的时候也踩过这个坑——每次更新答案都往数组里加新对象，导致同一个questionID有好几条重复记录对吧？核心就是要先判断数组里有没有对应ID的答案，再决定是更新还是新增，而且得严格遵循React的state不可变原则。

下面给你两种靠谱的实现方式：

方式一：用findIndex定位并更新 #

这种方式逻辑清晰，适合需要明确知道索引位置的场景：

onChange(event) {
  const field = event.target.name;
  const question = event.target.dataset.questionId;
  const result = event.target.value;
  const newAnswerItem = { questionID: question, answerValues: result };

  // 用函数式更新确保拿到最新的state
  this.setState(prevState => {
    // 查找数组中是否存在相同questionID的项
    const targetIndex = prevState.answer.findIndex(item => item.questionID === question);
    
    let updatedAnswers;
    if (targetIndex !== -1) {
      // 存在则创建新数组，替换对应位置的项
      updatedAnswers = [...prevState.answer];
      updatedAnswers[targetIndex] = newAnswerItem;
    } else {
      // 不存在则追加新项到数组
      updatedAnswers = [...prevState.answer, newAnswerItem];
    }

    return { answer: updatedAnswers };
  });
}

方式二：用map遍历替换（更简洁） #

如果觉得索引操作麻烦，可以用map遍历数组，遇到匹配的questionID就更新值，否则保留原项：

onChange(event) {
  const field = event.target.name;
  const question = event.target.dataset.questionId;
  const result = event.target.value;

  this.setState(prevState => {
    // 先判断是否已有对应questionID的答案
    const hasExistingAnswer = prevState.answer.some(item => item.questionID === question);
    
    const updatedAnswers = hasExistingAnswer
      ? prevState.answer.map(item => 
          // 匹配到ID就更新answerValues，其余项原样保留
          item.questionID === question ? { ...item, answerValues: result } : item
        )
      : [...prevState.answer, { questionID: question, answerValues: result }];
    
    return { answer: updatedAnswers };
  });
}

关键注意点 #

• 绝对不能直接修改原state数组：React依赖state的引用变化来触发重新渲染，直接修改prevState.answer不会触发组件更新，必须创建新数组（用扩展运算符...或者slice()等方式）。
• 用函数式更新state：因为setState是异步的，当你基于现有state更新时，函数式更新能保证你拿到的是最新的state值，避免因为异步延迟导致的旧state覆盖问题。

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