React使用useState更新嵌套对象属性时如何避免覆盖其余字段

错误原因 #

你当前的写法直接替换了整个dateOfBirth对象，没有保留原有属性，React的状态更新不会自动合并嵌套对象的属性，需要手动处理内层对象的属性合并。

正确写法 #

修改onChange逻辑，先展开原有dateOfBirth的所有属性，再覆盖需要修改的目标字段即可：

<input
  value={values.dateOfBirth.month}
  onChange={(e) => setValues({
    ...values,
    dateOfBirth: { 
      ...values.dateOfBirth, // 保留原有month、day、year属性
      month: e.target.value 
    }
  })}
  type='number'
  placeholder='MM'
/>

<input
  value={values.dateOfBirth.day}
  onChange={(e) => setValues({
    ...values,
    dateOfBirth: { 
      ...values.dateOfBirth, // 保留原有month、day、year属性
      day: e.target.value 
    }
  })}
  type='number'
  placeholder='DD'
/>

优化写法（可选） #

如果想避免重复代码，可以给输入框添加对应name属性，封装通用处理函数：

// 定义通用处理函数
const handleDobChange = (e) => {
  const { name, value } = e.target
  setValues({
    ...values,
    dateOfBirth: {
      ...values.dateOfBirth,
      [name]: value
    }
  })
}

// 输入框直接复用函数
<input
  name="month"
  value={values.dateOfBirth.month}
  onChange={handleDobChange}
  type='number'
  placeholder='MM'
/>
<input
  name="day"
  value={values.dateOfBirth.day}
  onChange={handleDobChange}
  type='number'
  placeholder='DD'
/>
<input
  name="year"
  value={values.dateOfBirth.year}
  onChange={handleDobChange}
  type='number'
  placeholder='YYYY'
/>

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