调用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这样做是为了确保组件的最少更新。