React onChange更新嵌套billingAdress状态时旧输入值被覆盖如何解决

你当前的事件处理逻辑中，更新嵌套的billingAdress对象时，直接用仅包含当前输入字段的新对象替换了完整的原有billingAdress对象，没有保留之前已经输入的字段值，所以每次输入新的输入框时，旧的输入内容就会从state中消失。

修改handleBillingChange方法，更新billingAdress时先展开原有billingAdress的所有属性，再合并当前输入的新值，修改后代码如下：

handleBillingChange = event => {
  const formData = {
    ...this.state.formData,
    billingAdress: {
      // 保留原有账单地址的所有已填字段
      ...this.state.formData.billingAdress,
      // 覆盖更新当前输入的字段值
      [event.target.name]: event.target.value
    }
  }
  const errors = { ...this.state.errors, [event.target.name]: '' }
  this.setState({ formData, errors })
}

• React中更新嵌套层级的state属性时，必须逐层展开对应层级的原有对象，才能保证未修改的属性值不丢失
• 如果你后续需要同时更新多个嵌套字段，也可以沿用这个逐层展开再合并的逻辑

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