当更改一个特定的状态设置时，是否有必要重述所有其他设置？

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

视情况而定。在您的第一种情况下，您可以这样做：

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

或者直接使用：

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

根据 React Docs 合并状态更新。

Answer 2

使用 setState 更新状态时，您不需要复制状态（使用扩展运算符或任何想法）。 setState 方法仅更新所需的状态：

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

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

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

类似地，当您return getDerivedStateFromProps 中的对象时，它的工作原理也是如此。 returned 值在没有突变的状态下应用。

更新状态属性时只需要复制状态即可。例如：

// 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 搜索 how to update the array without mutation?

当更改一个特定的状态设置时，是否有必要重述所有其他设置？

When changing one specific state setting, is it necessary to restate all the other ones?

setstate

reactjs