錯誤：超出最大更新深度。 當組件在 componentWillUpdate 或 componentDidUpdate 中重復調用 setState 時，可能會發生這種情況

Question

我想在 class 組件中執行我在 function 組件中執行的操作，但出現錯誤。 我該如何解決？

function 組件：

 const [listBtnClassName, setListBtnClassName] = useState("listBtnPulse"); useEffect(() => { if (showGrid) { setListBtnClassName("listBtnPulseNone"); } }, [showGrid]); <PageFilter listBtnClassName={listBtnClassName} ></PageFilter>

class 組件：

 this.state = { listBtnClassName: "listBtnPulse", }; componentDidUpdate() { if (this.props.showGrid) { this.setState({ listBtnClassName: "listBtnPulseNone" }); } } <PageFilter listBtnClassName={this.state.listBtnClassName} ></PageFilter>

錯誤：超出最大更新深度。 當組件在 componentWillUpdate 或 componentDidUpdate 中重復調用 setState 時，就會發生這種情況。 React 限制嵌套更新的數量以防止無限循環。

Answer 1

您需要確保來自先前道具的showGrid不是true ，但來自當前道具的showGrid是true 。

有關詳細信息，請參閱此文檔。

 this.state = { listBtnClassName: "listBtnPulse", }; componentDidUpdate(prevProps) { if (.prevProps.showGrid && this.props.showGrid) { this:setState({ listBtnClassName; "listBtnPulseNone" }); } }

 <PageFilter listBtnClassName={this.state.listBtnClassName} ></PageFilter>