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

IT技术 javascript reactjs typescript

2021-05-18 04:31:49

假设我有一个 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'
});

我知道有些库可以轻松复制对象状态，只是想知道是否有必要这样做。我还应该补充一点，我已经尝试过这个并且它似乎有效，但我还没有在网上看到任何例子这样做，所以想知道是否有某种原因。

3个回答

要更新单个字段，您需要使用此字段传递对象。React 会为你合并它。

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

永远不要直接改变 this.state，因为之后调用 setState() 可能会替换你所做的改变。将 this.state 视为不可变的。

使用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 与现有状态对象一起使用吗？

更多的