React useState中如何更新对象内指定日期的练习数组？

要实现给指定日期内添加新练习的功能，你可以写一个接收日期索引的函数，通过索引定位到目标日期，再给该日期的exercises数组追加新的练习对象：

function addExercise(dayIndex) {
  setFormFields(prev => {
    // 复制原数组，避免直接修改state
    const updatedAllExercises = [...prev.allExercises];
    // 复制目标日期的对象，保证不可变更新
    const targetDay = { ...updatedAllExercises[dayIndex] };
    // 给该日期的练习数组添加新练习模板
    targetDay.exercises = [
      ...targetDay.exercises,
      { name: '', sets: '', reps: '', link: '' }
    ];
    // 更新数组中对应索引的日期对象
    updatedAllExercises[dayIndex] = targetDay;
    // 返回完整的更新后state
    return {
      ...prev,
      allExercises: updatedAllExercises
    };
  });
}

接下来在渲染日期区块时，给每个日期绑定对应的添加按钮，把当前日期的索引传给addExercise函数：

{formFields.allExercises.map((day, index) => (
  <div key={index} className="day-block">
    {/* 日期名称输入框 */}
    <input
      type="text"
      value={day.day}
      onChange={(e) => {
        // 补充修改日期名称的逻辑
        setFormFields(prev => {
          const updatedAllExercises = [...prev.allExercises];
          updatedAllExercises[index] = { ...updatedAllExercises[index], day: e.target.value };
          return { ...prev, allExercises: updatedAllExercises };
        });
      }}
      placeholder="输入日期（如：周一）"
    />
    {/* 绑定当前日期索引的添加练习按钮 */}
    <button onClick={() => addExercise(index)}>添加新练习</button>

    {/* 渲染该日期下的所有练习表单 */}
    {day.exercises.map((exercise, exerciseIdx) => (
      <div key={exerciseIdx} className="exercise-block">
        <input
          type="text"
          value={exercise.name}
          onChange={(e) => {
            // 补充修改练习名称的逻辑
            setFormFields(prev => {
              const updatedAllExercises = [...prev.allExercises];
              const updatedExercises = [...updatedAllExercises[index].exercises];
              updatedExercises[exerciseIdx] = { ...updatedExercises[exerciseIdx], name: e.target.value };
              updatedAllExercises[index] = { ...updatedAllExercises[index], exercises: updatedExercises };
              return { ...prev, allExercises: updatedAllExercises };
            });
          }}
          placeholder="练习名称"
        />
        {/* 重复上述逻辑，添加sets、reps、link的输入框 */}
      </div>
    ))}
  </div>
))}

核心说明 #

• 通过dayIndex精准定位要添加练习的日期，避免影响其他日期的练习列表
• 所有state更新都遵循不可变原则，通过浅拷贝原对象/数组再修改，保证React能正确触发重渲染
• 遍历数组时用索引作为key（如果有唯一ID建议用ID替代索引，更稳定）

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