React登录组件输入变更时状态无法更新的问题排查

问题根源 #

在handleInputChange函数中，更新嵌套状态对象时的属性顺序错误：

[identifier]: {
  value: value,
  ...prevValues[identifier] // 旧对象的value会覆盖刚设置的新value
}

对象中后声明的属性会覆盖先声明的属性，你先设置了新的value，随后展开旧状态里的对应对象，旧的value会直接覆盖新输入的值，导致状态看起来完全没更新。

修复方案 #

调整属性顺序，先展开旧对象的原有属性，再设置新的value，确保新值能覆盖旧值：

function handleInputChange(identifier, value) {
  console.log(`Changing ${identifier} to ${value}`);

  setEnteredValues(prevValues => ({
    ...prevValues,
    [identifier]: {
      ...prevValues[identifier], // 先保留旧属性（比如didEdit）
      value: value // 再设置新输入的value，覆盖旧值
    }
  }))
}

修改后，输入框触发onChange时，新的输入值会正确同步到组件状态中，双向绑定即可正常工作。

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