如何在深层嵌套对象中保存状态？答案

【问题标题】：How to save state in a deep nested object?如何在深层嵌套对象中保存状态？
【发布时间】：2019-03-22 09:03:43
【问题描述】：

我有一个存储在 state 中的 JSON 文件。现在我需要更新该文件中的值。当我使用 setState 时，它不会保存任何东西。 this.state.data 是一个包含 4 个对象的数组。我在哪里做错了？

这是我的状态：

constructor(props) {
    super(props)
    this.state = {
      data: null,
    }
  }

现在我正在尝试将值保存在数据中

this.setState({
      [data[index].settings[idSettings].settings._init_[idMessageContent]
        .message_content]: newValue,
    })

【问题讨论】：

你能分享 json 对象以便更好地理解@Yerlan
与stackoverflow.com/questions/34956479/…重复？

标签： javascript reactjs

【解决方案1】：

[data[index].settings[idSettings].settings._init_[idMessageContent].message_content] ~ [oldValue]

而你所做的是

this.setState({[oldValue]: newValue})

这意味着您为状态设置了一个名为 [oldvalue] 的新属性。您应该将data 克隆到一个新对象并改变该对象。然后将整个新对象分配给state

// Deep clone the object
const newData = JSON.parse(JSON.stringify(this.state.data))
// Mutating the new object
newData[index].settings[idSettings].settings._init_[idMessageContent].message_content = newVlaue
// Assign the new object to state
this.setState({data: newData})

【讨论】：

【解决方案2】：

如果您想完全避免突变，我可以向您推荐以下几种解决方案。

一种解决方案是像这样手动散布对象的每一层。

this.setState((prevState) => ({
  users: {
    ...prevState.users,
    john: {
      ...prevState.users.john,
      status: {
        ...prevState.users.john.status
        /* ... */
      } 
    }
  }
}))

但是看起来很复杂，不可读。

我更喜欢的解决方案是编写自己的实用程序函数来为您完成，或者您可以使用已经存在且经过充分测试的函数，例如 Ramda.js 中的 assocPath 或其他库中的类似函数（例如 Lodash 等）

this.setState(R.assocPath([ 'users', 'john', 'status', ...], newPropValue))

【讨论】：