React Hooks使用onChange修改嵌套对象状态时丢失lng值如何解决

问题根因 #

当前更新逻辑直接替换了完整的coordinates对象，仅保留了新传入的单属性，原有lng属性被直接覆盖导致丢失。

修正代码 #

更新嵌套层级的状态时，需要先展开当前层级的原有属性，再覆盖要修改的字段：

const handleLat = (event) => {
    setInputFields({ 
      ...inputFields, 
      coordinates: {
        // 展开原有coordinates的所有属性，保留lng值
        ...inputFields.coordinates,
        [event.target.name]: parseInt(event.target.value)
      } 
    })
};

优化写法 #

如果需要同时适配纬度、经度两个输入框的更新，推荐使用函数式更新写法，规避React异步状态更新可能带来的旧值引用问题：

// 只需给lat输入框设置name="lat"，lng输入框设置name="lng"，即可共用该处理函数
const handleCoordinateChange = (event) => {
  setInputFields(prevState => ({
    ...prevState,
    coordinates: {
      ...prevState.coordinates,
      [event.target.name]: parseInt(event.target.value)
    }
  }))
};

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