Question

我有这样的默认状态：

 {
  "result": [
    {
      "USER_ID": "9876543210",
      "Desc": "Very nice"
    },
    {
      "USER_ID": "9876543210",
      "Desc": "Very nice2"
    }
  ]
}

因此，每当我想要更新lat或lng时，我都必须这样做

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

或

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

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

Answer 1

尽可能保持您的状态为“平坦”状态。尽可能。

在您的情况下，您可以这样做：

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

随着您的州变大，请使用命名来隔离不同的属性

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

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

补充说明：

每当看到此模式时，将组件拆分为较小的部分
如果您知道每次更新整个对象

从您的位置对象：

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

像这样初始化你的状态：

this.state = location

Answer 2

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

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

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

请参阅Object.assign的原生实现以了解更多信息。由于它只复制第一级，因此建议保持状态平稳。

＆＃13;

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

＆＃13;

参考阅读更多：

State Normalising

使用es6 spread实现setState嵌套对象

2 个答案: