错误：超出最大更新深度。 当组件在 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>