ReactJS使用reactjs-popup自动触发弹窗出现无限重渲染如何解决

问题根因 #

你遇到的无限重渲染问题，核心是直接在组件的渲染返回逻辑中执行了state更新函数setShowPopup：
React组件每次渲染时都会执行return块内的所有表达式，当meta.error === 'codigo 2 fatores incorreto'条件满足时，就会调用setShowPopup更新state，而state更新会触发组件重新渲染，重新渲染又会再次执行setShowPopup，最终形成死循环，触发React的渲染次数限制报错。

解决方法 #

1. 直接删除return块内多余的state更新逻辑，也就是下面这段完全不需要保留：

{meta.error === "codigo 2 fatores incorreto" ? (
  !showPopup ? ( setShowPopup(true)) : ("") // <-- Only set state if not true 
) : <Popup>.</Popup>}

你已经编写了对应的useEffect监听meta.error的变化，这个逻辑本身是正确的，只有meta.error的值发生变化时才会触发执行，不会导致死循环，完全可以满足自动弹窗的需求。

2. 你代码中定义的MyComponent也存在同样的问题：直接在组件函数体内调用setState(true)，如果这个组件不需要使用可以直接删除，需要使用的话也要把setState逻辑放到useEffect中执行，避免死循环。

3. 剩余的弹窗控制逻辑无需修改：<Popup open={showPopup} onClose={() => setShowPopup(false)} modal>的写法完全符合reactjs-popup的使用规范，onClose回调可以正常关闭弹窗。

修改完成后即可实现meta.error符合条件时自动弹出弹窗，不会触发死循环问题。

内容的提问来源于stack exchange，提问作者Guilherme Cavenaghi