Javascript 使用es6扩展设置嵌套对象的状态

我有如下默认状态：

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，我就必须编写大量的

…

，如果我有一个嵌套对象级别，情况会更糟。另外，这样做是危险的，因为如果没有定义位置，它将有错误，并使整个应用程序崩溃。在react中处理对象或对象的多个嵌套数组时有什么提示？

只要可能，请尽可能保持状态为“平坦”

在您的情况下，您可以简单地执行以下操作：

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

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

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

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

补充说明：

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

从您的位置对象：

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

按如下方式初始化您的状态：

this.state = location

---

只要可能，尽可能保持你的状态为“平坦”

在您的情况下，您可以简单地执行以下操作：

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

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

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

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

补充说明：

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

从您的位置对象：

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

按如下方式初始化您的状态：

this.state = location

---

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

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

其主要原因在于。它仅复制第一级的值

请参阅的本机实现以了解更多信息。因为它只复制第一级，所以建议保持状态平坦

var a={b:1，c:{d:1}
var e=Object.assign（{}，a）
console.log（a==e）//它将为false
e、 c.d=2
console.log（a.c.d）//它将是2

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

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

其主要原因在于。它仅复制第一级的值

请参阅的本机实现以了解更多信息。因为它只复制第一级，所以建议保持状态平坦

var a={b:1，c:{d:1}
var e=Object.assign（{}，a）
console.log（a==e）//它将为false
e、 c.d=2
console.log（a.c.d）//它将是2个

多嵌套数组

-但是。。。没有array@JaromandaX我确实提到了

或
技巧是
..
已经使代码更紧凑了，您希望代码有多短？@JaromandaX我认为有一些库像normlizr可以解决这个问题。那么，使用这样的库
多嵌套数组
-但是。。。没有array@JaromandaX我确实提到了
或
技巧是
..
已经让代码更紧凑了，你希望代码有多短？@JaromandaX我想有一些像normlizr这样的库可以解决这个问题。好吧，那就使用这样的库吧有时你不能做任何你想做的事，我是一个前端，无法控制由另一个团队完成的响应数据的结构。但您可以自由地将响应转换为您希望在组件中使用的任何对象。编辑了我的帖子。如果这不是您所要求的，请更新您的问题，并提供更多关于您的API响应的详细信息，或者发布一个新的问题，以免过于混淆。感谢MetTime你不能做任何你想做的事，我是一个前端，无法控制响应数据的结构，由另一个团队完成。但是你可以自由地将响应转换为你想在组件中使用的任何对象。编辑了我的帖子。如果这不是您所要求的，请更新您的问题，并提供更多关于您的API响应的详细信息，或者发布一个新的问题，以免过于混淆。谢谢