Question

比方说，我的状态如下所示。

constructor(props) {
  super(props);

  this.state = {
    setting_a: "value-1",
    setting_b: "color-green"
  }
}

当我更改特定设置（例如setting_a）的状态时，我不希望其他设置（例如setting_b）消失。因此，我还要在更改状态时指定其他设置。（使用扩展运算符...state很容易。）

this.setState( {...this.state, setting_a: "value-2"});

不过，我注意到，有些教程会重述它们，而另一些教程仅指定更改后的键值。

自Component#getDerivedStateFromProps方法引入以来（从React 16.3开始），事情变得有点复杂。

static getDerivedStateFromProps(props, state) {
  const oldSetting = state.setting_a;
  const newSetting = props.setting_a;

  if (oldSetting !== newSetting) {
    // this is a very similar situation.
    return ({ ...state, state.setting_a: props.setting_a});
  }
  return null;
}

同样，在上面的示例中，我添加了以前的所有设置（即...state），因为我不想删除其他设置。

在这两种情况下，都是相同的问题：我是否需要专门重复已经处于该状态的值？还是状态总是在不删除的情况下进行增量合并？

Answer 1

使用setState更新状态时，无需复制状态（使用传播运算符或任何想法）。 setState方法仅更新所需的状态：

this.setState( {setting_a: "value-2"});

所以，现在您仍然会得到：

state = {
    setting_a: "value-2",
    setting_b: "color-green"
  }

类似地，当您在getDerivedStateFromProps中返回对象时，它的工作原理也是如此。返回的值将以无突变状态应用。

仅在要更新状态属性时才需要复制状态。例如：

// initial state
this.state = {
  settings: {
    a: 'value-1',
    b: 'color-green'
  }
}

现在，我们拥有a状态的b和settings属性。因此，现在，如果您想更新a，则需要复制settings：

this.setState((state) => ({settings: {...state.settings, a: 'value-2' } }))

前面的示例是带有设置对象的。您可以认为与状态数组相似。您可能只用Google搜索如何更新数组而不会发生突变？

Answer 2

这取决于。在第一种情况下，您可以这样做：

this.setState( prevState => {  
    prevState.setting_a = "value-2";  
    return prevState
});

或者随身携带：

this.setState({ setting_a: "value-2" });

根据React Docs状态更新被合并。

更改一个特定的状态设置时，是否需要重新声明所有其他状态设置？

2 个答案: