ComponentDidUpdate SetState ReactJS無限循環

即使有許多相同主題行的問題，我也無法得到我的問題的答案。ComponentDidUpdate SetState ReactJS無限循環

問題

我有一個選擇下拉。點擊它，我會調用一個獲取一些關鍵值的Api。我認爲這組鍵值輸入字段是一個組件。因此，每次在選擇下拉菜單的Change時，我都使用生命週期方法來處理API調用。此外，我記錄這些輸入鍵值並將其狀態發送回父組件。

根據ReactJS生命週期方法：

我用

componentDidMount 後初步呈現呼籲首次API。這工作。

componentDidUpdate 在選擇下拉式更改時調用API以用於後續API調用。但這是問題。當我嘗試更新輸入字段的狀態時，程序陷入無限循環，因此存在無限的API調用。我很確定調試後，問題是setState（），但我無法找到在componentDidUpdate方法中處理狀態的最佳方法。

這正是link複製我的問題，但我希望有一個標準化的解決方案

希望這是顯而易見的。感謝您的幫助！

來源

2016-06-21 bks4line

是的，你不能setState（）裏面componentDidUpdate它會導致無限循環。而你可以調用一個函數onChange事件，並改變那裏的狀態。

來源

2016-06-21 06:58:19

謝謝！我瞭解解決方法。但ReactJS文檔建議我們可以在componentDidUpdate中設置狀態。想知道我是如何誤解了這個概念的。 http://busypeoples.github.io/post/react-component-lifecycle/請檢查這個博客，你能告訴我我哪裏出了錯？ – bks4line

當你setState（）在componentDidUpdate裏面時，它會調用下面的生命週期：shouldComponetUpdate - > componentWillUpdate ---> render ---再次----> componentDidUpdate。這樣就創建了無限循環。 –

發生這種情況是因爲setState觸發了對componentDidUpdate的調用。

當componentDidUpdate被調用時，setState不檢查是否發生了狀態改變。它只是一次又一次地調用componentDidUpdate，這導致了stackoverflow。

class Component extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state = {changeState: false} 
    } 
    componentDidMount(){ 
     this.setState({changeState: true}); 
    } 
    componentDidUpdate(){ 
     this.setState({changeState: false}); 
    } 
}

這裏，首先在構造函數中將changeState設置爲false，然後觸發componentDidMount，它將changeState的狀態設置爲true。此狀態更改觸發componentDidUpdate，它將changeState的狀態再次設置爲true。這會一次又一次觸發componentDidUpdate。

來源

2017-09-25 08:11:35

ComponentDidUpdate SetState ReactJS無限循環

回答

相關問題