場景：

在 React 組件中，當在 componentWillUpdate 或 componentDidUpdate 生命周期方法中調用 setState 時，會觸發無限循環，導致超過最大更新深度。

錯誤原因

在React組件中 ，我們使用componentWillUpdate 或 componentDidUpdate 生命周期方法中調用 setState 方法，但是調用seState會導致組件重新渲染 ，那么這個生命周期會重新執行，所以陷入了一個無限循環

解決辦法

如果需要快速解決的話可以直接用第四種方法。要是想進步的話可以看一看其他的方法。

• 檢查生命周期方法中的邏輯：仔細檢查 componentWillUpdate 和 componentDidUpdate 方法中的代碼，確保沒有在這些方法內部直接或間接地調用 setState 來觸發組件的重新渲染。

• 使用生命周期方法前進行條件判斷：在調用 setState 前進行條件判斷，確認是否真正需要更新狀態。例如，可以添加一個標志位或比較新舊狀態值，只有在滿足特定條件時才調用 setState。

• 避免在 render 方法中調用 setState：render 方法應該只用于渲染組件的 UI，不應該在其中調用 setState。如果需要根據狀態的變化來處理其他邏輯，請將相關邏輯放在其他生命周期方法中，或使用 useEffect（在函數式組件中）進行狀態變化的監聽和處理。

• 考慮使用 componentDidMount 替代：如果在 componentDidUpdate 中只是希望在更新后執行一些副作用操作，可以將這些邏輯移到 componentDidMount 生命周期方法中，避免觸發無限循環。

• 使用 shouldComponentUpdate 進行性能優化：在一些情況下，可能需要手動實現 shouldComponentUpdate 方法來決定是否需要重新渲染組件。通過對比前后的狀態或屬性，可以有選擇地返回 true 或 false，以避免不必要的更新。