使用es6 spread实现setState嵌套对象

Question

我有这样的默认状态:

this.state = {
  location:{
    lat: 1234,
    lng: 3245
  }
}

所以每当我想要更新lat或lng时,我必须这样做

this.setState({ location: {...this.state.location, lat: newLate} })

要么

this.setState({ location: {...this.state.location, lng: newLng } })

如果我的组件中有几个setState,我必须写很多...,如果我有一个级别的嵌套对象可以使用,那就更糟了.这样做也很危险,{this.state.location.lat}因为它会有错误,如果没有定义位置,它会使整个应用程序崩溃.当你在反应中处理多个嵌套的对象或对象数组时,提示是什么？

Answer 1

尽可能保持您的州尽可能"平坦".

在您的情况下,您可以简单地做:

this.state = {
  lat: 1234,
  lng: 3245
}

随着您的状态变得更大,请使用命名来隔离不同的属性

this.state = {
  locationLat: 1234,
  locationLng: 3245
}

即使在具有数百个组件的应用程序中,我也不需要使用嵌套状态.

补充说明:

• 每当看到此模式时,将组件拆分为更小的部分
• 如果您知道每次更新整个对象,则仅使用嵌套对象

从您的位置对象:

const location = {
    lat: 1234,
    lng: 3245
}

像这样初始化你的状态:

this.state = location