Question

我似乎找不到如何在React中正确设置状态的一致示例。

说，我的组件状态为：

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

如果我想更改属性，我会（目前）这样做：

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'})就足够了。看看docs

Answer 2

状态更新已合并，请在此处React docs about setState

了解更多信息

Answer 3

React Docs显示，您不必使用A1:D20。

要在Redux中使用reducers来更改商店。

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根本不会更新状态。 React进行键值比较以查看this.setState()的内容是否与this.state相同。 React这样做是为了确保组件的最少更新。

调用this.setState（）时是否需要“ ... this.state”

6 个答案: