反应setState函数和复杂对象[重复]答案

【问题标题】：React setState function and complex objects [duplicate]反应setState函数和复杂对象[重复]
【发布时间】：2018-03-21 02:50:44
【问题描述】：

我一直在尝试围绕 setState 进行思考。我知道首选的方法是传递 setState 一个函数，因为该方法是异步的，因此可以防止覆盖状态更改。所以最常见的是：

this.setState(() => ({title}))

但是如果我有一个复杂的对象怎么办。我的状态是这样的：

{
 movie: { name : 'one', length: 35},
 showLength: false
}

我想显示基于按钮点击的长度，所以我想将 bool 更改为 true/false，这很容易

this.setState((prevState) => ({showLength : !prevState.showLength}))

但是如果我想编辑电影的名称怎么办？在将它传递给 setState 之前，我是否必须克隆整个状态，或者是否有更简单的方法。我的意思是这不起作用（但表明了我的意图）：

this.setState((prevState) => ({movie.title:'new title'}))

【问题讨论】：

抱歉重复。称为嵌套对象。还必须向 babel 添加“transform-object-rest-spread”才能使其正常工作！

标签： reactjs

【解决方案1】：

setState 可以多种方式使用。您可以只传入一个对象，也可以传入一个函数，其中获取prevState 作为参数。

所以这个，

this.setState(() => ({title}))

其实和这样做一样，

this.setState((prevState) => {
  return { title: title };
});

因此，您可以对状态进行复杂的更改并返回新值。

示例

this.setState((prevState) => {
  const newState = Object.assign({}, prevState);
  newState.movie.title = 'some new title';
  newState.showLength = !prevState.showLength;
  return newState;
});

【讨论】：

您好，完美的答案，我是新来的反应，传统的带有对象的 setState 是异步的，因为它有协调但功能 setState 是同步的，因为它没有协调，这是真的吗？
“示例”是我一直在寻找的东西。确实完美！

【解决方案2】：

你是对的，你必须复制movie的内容，然后更新你想要的字段。

这应该可行：

this.setState((prevState) => ({...prevState.movie, title:'new title'}))

【讨论】：