Question

我一直在尝试围绕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'}))

Answer 1

您更正了，您必须复制movie的内容，然后更新您想要的字段。

这应该有效：

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

Answer 2

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; });

React setState函数和复杂对象

2 个答案: