用静态 getDerivedStateFromProps 替换 componentWillReceiveProps 的问题

Question

我有Dropdown comp，用户可以在其中选择一些过滤器。

我也有按钮clear-filters，当用户单击该按钮时，父组件中的过滤器消失了，但在dropdown comp 中仍然保持选中的过滤器。

这意味着我的下拉列表没有像以前那样正确更新UNSAFE_componentWillReceiveProps：

带有UNSAFE_componentWillReceiveProps()的下拉组件：

  state = {
     options: props.options || []
  };

  componentDidMount() {
    this.setSelectedOptions(this.props);
    document.addEventListener('mousedown', (e) => this.handleClickOutside(e));
    if (this.props.onRef) {
      this.props.onRef(this);
    }
  }

  UNSAFE_componentWillReceiveProps(props) {
    this.setSelectedOptions(props);
  }

这是 Dropdown 迁移版本，它不像以前那样工作：

  state = {
      options: props.options || []
  };

  componentDidMount() {
    this.setSelectedOptions(this.props);
    document.addEventListener('mousedown', (e) => this.handleClickOutside(e));
    if (this.props.onRef) {
      this.props.onRef(this);
    }
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const { options } = nextProps;

// CHECKING DOES SOME OPTIONS PROPERTIES ARE CHANGED OR NOT
    options.forEach((filter, i) => {
      if (filter.selected !== prevState.options[i].selected) {
        return { options };
      }
    });
    return null;
  }

有什么建议吗？

Answer 1

从快速检查看来，这里唯一的问题是您从错误的地方返回“选项”。请注意，当您在数组上使用 forEach 时，您传递的是一个函数，该函数与数组的每个元素一起执行。当您返回 { options } 时，您只是从传递给 forEach 的函数返回，而不是实际从 getDerivedStateFromProps 返回。

我建议改为在 getDerivedStateFromProps 范围内创建一个标志变量 (shouldReturnOptions)：

static getDerivedStateFromProps(nextProps, prevState) {
  const { options } = nextProps;
  let shouldReturnOptions = false;

  options.forEach((filter, i) => {
    if ((!shouldReturnOptions) && (filter.selected !== prevState.options[i].selected)) {
      shouldReturnOptions = true;
    }
  });

  if (shouldReturnOptions) {
    return { options };
  }
  return null;
}