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;
}

用静态getDerivedStateFromProps替换componentWillReceiveProps的问题

1 个答案: