Question

我正在尝试以这种方式使用收到的道具来更新某些组件的状态：

componentWillReceiveProps(nextProps) {
   if(nextProps.history.length <= 2) {
      this.setState({
         history: nextProps.history
      });
   }
}

问题在于，当父级传递的历史记录长度大于2时，状态仍在变异。有什么想法吗？

谢谢

Answer 1

生命周期方法componentWillReceiveProps已过时。您应该使用getDerivedStateFromProps

getDerivedStateFromProps会在调用render方法之前（无论是在初始安装还是在后续更新中）都被调用。它应该返回一个对象以更新状态，或者返回null则不更新任何内容。

Answer 2

您可以使用componentDidUpdate()生命周期方法，也可以使用静态getDerivedStateFromProps()方法。

static getDerivedStateFromProps(props, state) {
    return ({
        history: props.history.length <= 2 ? props.history : state.history
    })
}

或者，如果您愿意：

componentDidUpdate(prevProps) {
    const { history } = this.props;
    if((prevProps.history !== history) && history.length <= 2) {
        this.setState({ history })
    }
}

Answer 3

如果nextProps历史记录不小于2，则可以使用getDerivedStateFromProps（）钩子来更新状态，即返回前一个状态，因为您不能在此函数内使用props。

   static getDerivedStateFromProps(nextProps, prevState) {
          if (nextProps.history <= 2) {
            return {history: nextProps.history};
          } else {
            return {history: prevState.history};
          }
    }

使用prop更新组件的状态

3 个答案: