首页 文章

使用es6 spread实现setState嵌套对象

提问于
浏览
0

我有这样的默认状态:

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} 因为它会有错误,如果没有定义位置,它会使整个应用程序崩溃 . 当你在反应中处理多个嵌套的对象或对象数组时,提示是什么?

2 回答

  • 5

    尽可能保持您的州尽可能“平坦” .

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

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

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

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

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

    补充说明:

    • 每当看到此图案时,将组件拆分成较小的块

    • 如果您知道每次更新整个对象,则仅使用嵌套对象

    从您的位置对象:

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

    像这样初始化你的状态:

    this.state = location
    
  • 1

    始终建议尽可能保持状态 flat . 所以在你的情况下它可以

    state={
      locationLat:123,
      locationLng: 456,
    }
    

    它的主要原因来自How object.assign works . 它仅复制第一级的值 .

    请参阅Object.assign的本机实现以了解更多信息 . 由于它只复制第一级,因此建议保持状态平坦 .

    var a = {b:1, c:{d:1}}
    
    var e = Object.assign({},a)
    
    console.log(a===e) // It will false
    
    e.c.d = 2
    
    console.log(a.c.d) //It will be 2
    

    参考更多:

    丹_000_State Normalising

相关问题