React setState函数和复杂对象

我一直试图围绕setState包裹我的头。我知道首选方法是传递setState函数，因为该方法是异步的，从而防止覆盖状态更改。所以大多数情况下，这是有效的：React setState函数和复杂对象

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

但是如果我有一个复杂的物体。我的状态是这样的：

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

我想展示基于一个按钮的长度点击，所以我想将布尔更改为true/false，这是很容易

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

但如果我什么想要编辑电影的名字？在将其传递给setState之前，我是否需要克隆整个状态，还是有一个更简单的方法。我的意思是这不会导致的工作（但显示了我的意图）：

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

来源

2017-10-09 Todilo

抱歉重复。称为嵌套对象。还必须添加“转换对象休息传播”巴贝尔让它工作！ – Todilo

你是正确的，你必须要复制的movie内容，然后更新所需的字段。

这应该工作：

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

来源

2017-10-09 20:08:32

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

来源

2017-10-09 20:12:19 bennygenel

React setState函数和复杂对象

回答

相关问题