ReactJS：遍历用户子数组goals时输入框无法输入的问题

你的问题核心出在handleAddGoal函数的实现逻辑上：

• 你修改了目标数组goalsOfUser，但未将修改后的数组同步回users状态中
• 最后调用setUsers(users)时，传递的是原状态数组的引用，React基于引用对比判断状态未变化，因此不会触发组件重渲染，导致输入框内容无法更新

修复后的handleAddGoal函数 #

const handleAddGoal = (index, goalIndex, event) => {
  // 拷贝整个users数组，避免直接修改原状态
  const updatedUsers = [...users];
  // 拷贝当前用户的goals数组
  const updatedGoals = [...updatedUsers[index].goals];
  // 修改指定目标的mainGoal值
  updatedGoals[goalIndex][event.target.name] = event.target.value;
  // 将修改后的goals数组放回对应用户对象
  updatedUsers[index].goals = updatedGoals;
  // 更新状态
  setUsers(updatedUsers);
}

原代码失效原因 #

1. 仅修改了goalsOfUser，但未将其赋值回users[index].goals，原users状态根本没被修改
2. 即便修改了users[index].goals，users数组本身的引用未变，React不会触发重渲染
3. 最终调用setUsers(users)传递原数组，完全没有触发状态更新的逻辑

额外优化：handleAddMore的潜在问题 #

你的handleAddMore函数虽能运行，但存在浅拷贝隐患（若用户对象新增嵌套属性，会导致意外的状态修改），建议优化为：

const handleAddMore = (index, event) => {
  const updatedUsers = [...users];
  // 拷贝当前用户对象，避免直接修改原对象
  const updatedUser = {...updatedUsers[index]};
  updatedUser[event.target.name] = event.target.value;
  updatedUsers[index] = updatedUser;
  setUsers(updatedUsers);
}

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