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函數和複雜對象

回答

相關問題