如何修复错误未捕获的错误：重新渲染过多。 React 使用 React 限制渲染次数以防止无限循环？

Question

我收到未捕获的错误。 太多的重新渲染。

我想做什么？

单击按钮时，将调用启动 function 并打开模式弹出窗口。 一旦启动 function 完成，我必须关闭模式弹出窗口。

下面是代码，

enum CheckStatus {
    INITIAL,
    STARTING,
    STARTED,
    FINISHED,
    FAILED,
}

const useSomeHook = (id) => {
    const [status, setStatus] = React.useState(CheckStatus.INITIAL);
    
    const start = React.useCallback(async () => {
        setStatus(CheckStatus.STARTING);

        let data= undefined;
        try {
            const { data: checkData } = await startCheck({
                variables: { id },
            });
            data = checkData;
        }
        //some logic
         React.useEffect(() => {
             if (status === CheckStatus.STARTED ) {
                 stopPolling && stopPolling();
                 setStatus(Check Status.FINISHED);

                 //once status is finished then i have to close modal popup
             }
         }

         return {
             start,
             status,
         };
     };


const Main = () => {
    const [openModal,setOpenModal] = React.useState(false);
    const {start,status} = useSomeHook(id);

    return (
        {openModal && (<Modal />)}
    );
}

现在我想在状态完成时将 openModal state 设置为 false。 所以我喜欢下面，

const Main = () => {
    const [openModal,setOpenModal] = React.useState(false);
    const {start,status} = useSomeHook(id);
    
    if (status === CheckStatus.FINISHED) {
        setOpenModal(false); 
    } //this gives error
    return (
        {openModal && (<Modal />)}
    );
}

但给出了这个错误

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

我怎样才能解决这个问题？ 这是正确的解决方案吗？

一旦状态设置为 FINISHED，有没有办法在 useSomeHook 中设置 setOpenModal？

有人可以帮我解决这个问题。 谢谢。

Answer 1

我不是 100% 确定，但我相信您的问题是您在每次渲染时都设置了 state，而这又将始终重新渲染，并重新设置 state。 无限循环。 要解决此问题，您可能应该使用useEffect

const Main = () => {
    const [openModal,setOpenModal] = React.useState(false);
    const {start,status} = useSomeHook(id);

    React.useEffect(() => {
      if (status === CheckStatus.FINISHED) {
        setOpenModal(false); 
      }
    }, [status]);
    
    
    return (
        {openModal && (<Modal />)}
    );
}

这只会在status更改时执行 if 检查，而不是在每次渲染时执行。