时间戳

首页 > 解决方案 > 当更改一个特定的状态设置时，是否有必要重述所有其他状态设置？

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

问题描述

假设，我的状态如下所示。

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），因为我不希望删除其他设置。

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

标签： reactjssetstate

解决方案

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

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

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

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

同样，当您将对象返回到getDerivedStateFromProps. 返回值应用在没有突变的状态中。

当你想更新 state 的属性时，你只需要复制 state。例如：

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

前面的例子是设置对象。您可以对状态数组进行类似的思考。您可能只是在谷歌搜索如何在没有突变的情况下更新数组？

推荐阅读