React中向State数组添加新对象，重复则更新属性的实现问题

原代码问题分析 #

你的代码当前只处理了两种情况：state为空时新增第一个对象，或者state非空时更新已存在的匹配对象。但完全没有处理“state非空但要添加新对象”的分支，这就是已有一个对象后无法继续新增的原因。另外直接使用selected状态可能存在闭包问题，导致取到旧的state值。

修正后的代码 #

function select(answers, question, correct_answer) {
  setSelected(prevState => {
    // 查找是否已存在对应question的对象
    const targetIndex = prevState.findIndex(item => item.question === question);

    if (targetIndex !== -1) {
      // 存在则更新该对象的answers属性
      const updatedState = [...prevState];
      updatedState[targetIndex] = { ...updatedState[targetIndex], answers };
      return updatedState;
    } else {
      // 不存在则新增，同时限制最多存入5个对象
      if (prevState.length < 5) {
        return [...prevState, { answers, question, correct_answer }];
      }
      // 已达5个时返回原状态（可根据需求调整提示逻辑）
      return prevState;
    }
  });
}

核心要点说明 #

• 函数式更新：通过prevState参数获取最新的state值，避免闭包导致的旧state引用问题，这是React更新依赖前序state时的标准写法
• 存在性检查：用findIndex快速定位目标对象，找到后通过解构数组+修改对应元素的方式实现immutable更新（React state不可直接修改）
• 数量限制：新增时判断数组长度是否小于5，满足你最多存5个对象的需求
• 分支覆盖：完整处理了“更新已有对象”“新增新对象”“已达数量上限”三种场景

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