調用this.setState（）時是否需要“…this.state”

Question

我似乎找不到如何在React中正確設置狀態的一致示例。

說，我的組件處於以下狀態：

state = {
   propertyOne: 'abc',
   propertyTwo: 'def',
   propertyThree: 'ghi',
}

如果我想更改propertyOne，我會（目前）這樣做：

this.setState({...this.state, propertyOne: 'new value'})

我認為這是“記住”其他兩個值所必需的，但是，如果我不包括...this.state則仍然保留其他兩個值。

this.setState({propertyOne: 'new value'})

所以，我的問題是，我需要...this.state嗎？ 為什么有些人在互聯網上似乎建議使用它？

Answer 1

您不需要...this.state 。 this.setState({propertyOne: 'new value'})就足夠了。 看一下文檔

Answer 2

狀態更新已合並，請在此處閱讀更多有關setState的React文檔

Answer 3

React Docs顯示，您不必使用...this.state 。

在Redux及其reducer中，您可以這樣做來更改商店。

Answer 4

如果您使用的是較早版本的react（我認為在版本16或15之前，但不能100％確切地確定哪個版本），答案是肯定的。 如果使用版本16和更高版本，則不必

Answer 5

如果您直接想要更新狀態值，則無需使用傳播語法來更新狀態。 狀態更新會自動合並。

但是，當您要更新特定狀態值（例如將數據附加到數組）時，需要進行擴展。

state = {
   data: ['1']
}

this.setState(prevState => ({
    data: [...prevState.data, 2]
}))

Answer 6

正如其他人回答的那樣。 this.setState({propertyOne: 'new value'})是正確的。 React將自動復制{propertyOne: 'abc',propertyTwo: 'def', propertyThree: 'ghi'} 。 並將它們與新鍵和值{propertyOne: 'new value'}一起置於函數的新狀態。 React只更新this.setState()指定的密鑰

重要說明：如果鍵propertyOne已經具有'new value'的值，那么React根本不會更新狀態。 反應沒有一個關鍵值進行比較，以查看是否內容this.setState()是相同的this.state 。 React這樣做是為了確保組件的最少更新。