使用prop更新組件的狀態

Question

我試圖以這種方式使用收到的道具來更新某些組件的狀態：

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

問題在於，當父級傳遞的歷史記錄長度大於2時，狀態仍在變異。 有任何想法嗎？

謝謝

Answer 1

生命周期方法componentWillReceiveProps已棄用。 您應該使用getDerivedStateFromProps

在初始安裝和后續更新上，都在調用render方法之前立即調用getDerivedStateFromProps。 它應該返回一個對象以更新狀態，或者返回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 })
    }
}