React中如何将带星期索引的练习对象存入数组？求助

正确实现代码 #

const acceptExercises = () => {
  // 将选中的每个练习转换为带星期索引的条目
  const newWeeklyExercises = exerciseValues.map(exercise => ({
    index: selectedWeekday_Index,
    exercise: exercise
  }));

  // 合并数据：保留原有非当前星期的条目，添加新条目
  // 若需要替换当前星期的所有旧练习，先过滤掉原有数据中对应index的项
  const updatedFullData = [
    ...fullData.filter(item => item.index !== selectedWeekday_Index),
    ...newWeeklyExercises
  ];

  setFullData(updatedFullData);
}

原有代码的问题分析 #

• 多次重复更新状态：forEach循环里每次调用setFullData会覆盖之前的状态，最终只会保留最后一个练习的结果，无法批量添加所有选中项
• 对象键名错误：用[item.exercise]:element这种动态键写法完全偏离需求，我们需要固定的index和exercise键来存储对应值
• 数据合并逻辑错误：没有正确处理原有数据与新数据的组合，反而错误地遍历原有数据修改每一项

核心逻辑说明 #

1. 转换选中练习：通过map遍历exerciseValues，给每个练习绑定当前选中的星期索引，生成符合格式的新条目数组
2. 处理原有数据（可选）：如果需要替换该星期已有的旧练习，用filter移除fullData中对应星期的所有条目；如果只是追加，直接跳过过滤步骤，合并[...fullData, ...newWeeklyExercises]即可
3. 更新状态：一次性合并所有数据后调用setFullData，确保状态更新是原子性的

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