React组件中getDerivedStateFromProps如何返回多个状态更新值？

嘿，这事儿其实很简单！你只需要把两个状态的更新逻辑整合到同一个返回对象里就可以了，不用分开返回。而且这里要提醒你个小细节：原来代码里返回''是不符合React规范的，getDerivedStateFromProps应该返回包含更新属性的对象或者null（表示不需要更新状态），返回空字符串会导致意外的状态变更哦。

下面是调整后的代码，完美实现同时同步filterName和saveChecked两个状态：

static getDerivedStateFromProps(nextProps, prevState) {
  // 先创建一个空对象来存放需要更新的状态
  const stateUpdates = {};

  // 检查filterName是否需要更新
  if (nextProps.filterName !== prevState.filterName) {
    stateUpdates.filterName = nextProps.filterName;
  }

  // 检查saveChecked是否需要更新
  if (nextProps.saveChecked !== prevState.saveChecked) {
    stateUpdates.saveChecked = nextProps.saveChecked;
  }

  // 如果有需要更新的属性，返回这个对象；否则返回null告诉React不用更新状态
  return Object.keys(stateUpdates).length > 0 ? stateUpdates : null;
}

逻辑说明： #

1. 我们先初始化一个空对象stateUpdates，用来收集所有需要更新的状态键值对。
2. 分别判断filterName和saveChecked是否和当前状态不一致，不一致就把对应的props值加到stateUpdates里。
3. 最后判断stateUpdates有没有内容：如果有，就返回它（React会自动把这些属性合并到当前状态）；如果没有，返回null，避免不必要的状态更新。

这样修改后，你的组件就能同时根据props同步这两个状态属性啦！

内容的提问来源于stack exchange，提问作者user42010