更多

Question

假设我有一个具有10个字段的“状态”的React组件：

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'
});

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

Answer 1

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

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

Answer 2

不要直接改变this.state，因为之后调用setState（）可能替换你所做的突变。把它当作状态对待不可变的。

将Object.assign用于克隆对象

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

this.setState(newState)

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

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

Answer 3

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

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

这并不像你想象的那样不安全。 TypeScript添加了 fresh 的概念来支持这种模式和其他模式。

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

3 个答案:

更多