React中如何通过表单输入修改对象数组内的对象值？

你的核心问题在于updateForm只能处理顶层的扁平字段（比如title、date），而exercises是嵌套的数组对象，需要针对性处理。下面是具体的解决步骤：

1. 给表单元素添加索引和字段标识 #

渲染exercises数组时，每个输入框需要明确告诉函数：要修改的是第几个exercise的哪个属性。直接通过回调函数传递索引和字段名即可：

{formData.exercises.map((exercise, index) => (
  <div key={index}>
    <input
      type="text"
      value={exercise.Exercise}
      onChange={(e) => updateExercise(e, index, "Exercise")}
      placeholder="训练项目"
    />
    <input
      type="text"
      value={exercise.Reps}
      onChange={(e) => updateExercise(e, index, "Reps")}
      placeholder="次数"
    />
    <input
      type="text"
      value={exercise.Sets}
      onChange={(e) => updateExercise(e, index, "Sets")}
      placeholder="组数"
    />
  </div>
))}

2. 编写专门处理exercise的更新函数 #

单独写一个updateExercise函数，处理嵌套数组对象的更新，严格遵循React状态不可变原则：

const updateExercise = (e, index, field) => {
  setFormData(prev => {
    // 复制原数组，避免直接修改原状态
    const newExercises = [...prev.exercises];
    // 复制目标exercise对象，更新指定字段
    newExercises[index] = {
      ...newExercises[index],
      [field]: e.target.value
    };
    // 返回全新的formData对象
    return {
      ...prev,
      exercises: newExercises
    };
  });
};

3. 保留原函数处理顶层字段 #

原updateForm继续负责title、date这类顶层字段的更新：

const updateForm = (e) => {
  setFormData((currentFormData) => ({
    ...currentFormData,
    [e.target.name]: e.target.value,
  }));
};

扩展：添加新训练项的逻辑 #

如果需要动态添加训练项，可以基于同样的不可变原则扩展：

const addNewExercise = () => {
  setFormData(prev => ({
    ...prev,
    exercises: [...prev.exercises, { Exercise: "", Reps: "", Sets: "" }]
  }));
};

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