React - componentWillReceiveProps中的setState

Question

這合法嗎？

componentWillReceiveProps: function(nextProps) {
        if (typeof nextProps.contact != 'undefined') {
            this.setState({forename: nextProps.contact.forename});
            this.setState({surname: nextProps.contact.surname});
            this.setState({phone: nextProps.contact.phone});
            this.setState({email: nextProps.contact.email});
        }
    }

因為我不知道如何填充我的輸入，但仍然能夠用戶編輯輸入。 所以我提出了這個解決方案，而不是試圖操縱this.props。

有什么建議？

Answer 1

根據反應文檔，您的代碼是合法的。

您也可以考慮將此代碼放在getInitialState方法中，因為根據另一個反應文檔初始化來自props不是反模式。

您還可以使用一個setState方法調用替換多個調用：

 this.setState({forename: nextProps.contact.forename,
                surname: nextProps.contact.surname,
                phone: nextProps.contact.phone,
                email: nextProps.contact.email});

Answer 2

從React v16.6.3開始，這被認為是UNSAFE， componentWillReceiveProps 被標記為棄用 。 計划在版本17中進行刪除。

注意：

使用這種生命周期方法通常會導致錯誤和不一致，因此將來會被棄用。

如果您需要執行副作用（例如，數據提取或動畫）以響應props中的更改，請改用componentDidUpdate生命周期。

對於其他用例，請遵循此博客文章中有關派生狀態的建議。

如果您僅在prop更改時使用componentWillReceiveProps重新計算某些數據，請使用memoization helper。

如果您在prop更改時使用componentWillReceiveProps“重置”某些狀態，請考慮使用組件完全控制組件或完全不受控制。

在極少數情況下，您可能希望將getDerivedStateFromProps生命周期用作最后的手段。

在您的情況下，您應該使用componentDidUpdate 。

Answer 3

根據此反應文檔 ，不建議更改componentWillReceiveProps中的狀態。 該文件非常清楚地解釋了它。

它還為“完全受控組件”和“不受控制的組件”提供了替代解決方案，請閱讀此反應文檔

Answer 4

componentWillReceiveProps存在的唯一原因是為組件提供了setState的機會。 所以，是的，你在其中同步設置的任何狀態都將與新道具一起處理。