React-Redux中Store数组更新异常问题：表单生成器添加新问题时覆盖原有数据

嘿，我明白你遇到的麻烦了——在处理添加问题和选项时，要么覆盖原有内容，要么无法正确更新已有问题的选项。让我们一步步拆解问题，然后修复它。

问题核心分析 #

你的ADD_OTHER_OPTION分支里，最大的问题出在state.questions.map()的else逻辑中：

else {
  console.log('pas le meme dataid, autre question')
  // TODO revoir tout ce code, j'ecrase la question au lieu de la rajouter et du coup je rajotue les autre input sous la premiere question.
  const newQuestion = {
   // ...question,
   dataid: state.dataid,
   label: state.inputQuizQuestionValue,
   input: [
    {
     dataid: hightId,
     type: action.value,
     value: state.inputSelectedOptionValue,
    },
   ]
  }
  return newQuestion
}

当你给已有问题添加选项时，map会遍历所有问题：对于匹配action.dataid的问题，你正确地添加了新选项；但对于不匹配的问题，你没有返回原有的question，而是创建了一个全新的newQuestion，这直接导致所有旧问题被替换成了新的，自然就出现了覆盖现象。

另外，你的idMax计算逻辑也可以简化，避免不必要的复杂判断。

修复后的完整代码 #

让我们重写这个分支，解决这些问题：

case ADD_OTHER_OPTION: {
  // 简化idMax计算：获取所有input的dataid，取最大值，没有则用0
  const allInputIds = state.questions.flatMap(question => question.input.map(input => input.dataid));
  const idMax = allInputIds.length > 0 ? Math.max(...allInputIds) : 0;
  const highId = idMax + 1;

  // 准备新选项的基础结构
  const newInput = {
    dataid: highId,
    type: action.value,
    value: state.inputSelectedOptionValue,
  };

  // 检查是否已有匹配dataid的问题
  const existingQuestionIndex = state.questions.findIndex(q => q.dataid === action.dataid);

  let updatedQuestions;

  if (existingQuestionIndex !== -1) {
    // 情况1：已有该问题，给它添加新选项
    updatedQuestions = state.questions.map((question, index) => {
      if (index === existingQuestionIndex) {
        return {
          ...question,
          input: [...question.input, newInput]
          // 注意：这里不需要重写label和dataid，保持原问题的原有值即可
        };
      }
      // 不匹配的问题直接返回原对象，避免覆盖
      return question;
    });
  } else {
    // 情况2：没有该问题，创建新问题并添加到数组
    const newQuestion = {
      dataid: state.dataid,
      label: state.inputQuizQuestionValue,
      input: [newInput]
    };
    updatedQuestions = [...state.questions, newQuestion];
  }

  return {
    ...state,
    questions: updatedQuestions,
    inputSelectedOptionValue: '',
  };
}

关键改进点 #

1. 简化ID计算：用flatMap一次性获取所有input的dataid，避免复杂的条件判断，逻辑更清晰。
2. 区分两种场景：
   • 当找到匹配action.dataid的问题时，只更新该问题的input数组，其他问题保持不变；
   • 当找不到匹配的问题时，创建新问题并追加到questions数组末尾。
3. 避免覆盖旧数据：在map遍历中，不匹配的问题直接返回原对象，不会被替换成新的问题。
4. 保留原问题的属性：更新已有问题时，只扩展input数组，不需要重写label和dataid，避免意外覆盖原有值。

这样修改后，无论是给已有问题添加选项，还是创建新问题，都能正常工作，不会出现覆盖或失效的情况了。

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