React中handleChange无法处理reps/weight输入，报TypeError错误

问题根源 #

你调用handleChange时参数传递错误：
在JSX的reps和weight输入框中，你只传递了e和setIndex，但handleChange函数定义需要三个参数(e, exercisesIndex, setIndex)。这导致函数内部的exercisesIndex实际是setIndex的值，而setIndex变成了undefined，最终访问onChangeVal[exercisesIndex].sets[setIndex]时出现undefined错误。

修复步骤 #

1. 修正参数传递：在调用handleChange时，补充传入当前的exercisesIndex
2. 优化状态更新的不可变性（可选但推荐）：避免直接修改原状态对象，逐层拷贝嵌套结构，确保React能正确识别状态变化

修正后的代码 #

1. 调整JSX中的onChange调用 #

{exercise.sets.map((set, setIndex) => (
  <div
    key={`${exercise.title}-${setIndex}`}
    className="currentSetInput"
  >
    <input
      className="inputField"
      name="weight"
      type="text"
      value={set.weight}
      // 补充传入exercisesIndex
      onChange={(e) => handleChange(e, exercisesIndex, setIndex)}
    />
    <input
      className="inputField"
      name="reps"
      type="text"
      value={set.reps}
      // 补充传入exercisesIndex
      onChange={(e) => handleChange(e, exercisesIndex, setIndex)}
    />

    <button
      className="deleteSet"
      onClick={() => handleDelete(exercisesIndex, setIndex)}
    >
      -
    </button>
  </div>
))}

2. 优化handleChange函数的不可变性处理 #

const handleChange = (e, exercisesIndex, setIndex) => {
  const { name, value } = e.target;
  // 逐层拷贝，避免直接修改原状态
  const onChangeVal = exercises.map((exercise, idx) => {
    if (idx !== exercisesIndex) return exercise;
    // 拷贝当前exercise
    return {
      ...exercise,
      // 拷贝sets数组
      sets: exercise.sets.map((set, sIdx) => {
        if (sIdx !== setIndex) return set;
        // 拷贝目标set并更新对应属性
        return {
          ...set,
          [name]: value
        };
      })
    };
  });
  setExercises(onChangeVal);
};

这样修改后，reps和weight输入框就能正常响应状态变化，同时遵循了React状态不可变的原则，避免潜在的状态更新异常。

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