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

Posted 2023-02-21

【中文标题】反应setState函数和复杂对象[重复]

【英文标题】：React setState function and complex objects [duplicate]

【发布时间】：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”才能使其正常工作！

【参考方案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'))