React:您可以将setState与现有的状态对象一起使用吗

React: can you use setState with existing state object?

本文关键字：对象状态一起 setState React 更新时间：2023-09-26

假设我有一个React组件，它有一个包含10个字段的"状态"：

this.state = {
    field1: 1,
    field2: 2,
    ... other fields
    something: 'a'
};

在我的一个事件处理程序中，我决定更新一个状态字段。这样做是出于某种原因吗？

// state has 10 other properties not touched here, and I want them to
// retain their existing values
this.state.something = 'b';
this.setState(this.state);

或者我必须这样做：

this.setState({
    field1: this.state.field1,
    field2: this.state.field2,
    ... set other fields with current value
    something: 'b'
});

我知道有些库可以很容易地复制对象状态，只是想知道是否有必要这样做。我还应该补充一点，我已经尝试过了，它似乎有效，但我还没有在网上看到任何这样做的例子，所以我想知道是否有什么原因不这样做。

若要更新单个字段，需要传递带有此字段的对象。React会为您合并它。

this.setState({something: 'b'})

永远不要直接更改this.state，因为之后调用setState（）可能替换你的突变。把这个州当作不变的

将Object.assign用于克隆对象

const newState = Object.assign({}, this.state, {
  something: 'b'
})
this.setState(newState)

或者您可以合并当前状态：

this.setState({
  something: 'a',
  something2: 'b', 
})

您实际上会将State的所有成员标记为可选。

interface State {
  field1?: number, 
  field2?: number,
}

这并不像你想象的那么不安全。TypeScript添加了新鲜度的概念来支持此模式和其他模式。

React:您可以将setState与现有的状态对象一起使用吗

React: can you use setState with existing state object?

更多