在完成自动倒计时 function 后，它有警告“无法在渲染到不同组件时更新组件”

Question

I created a <Backdrop /> component and called in <App />

In <App /> , having a button to call out the <Backdrop /> . Inside of the <Backdrop /> , it has a useEffect to handle the count down function and render the count. After the count is down to 0 , the <Backdrop /> will close.

In fact, the modal can close when the count is down to 0 , but it will have a warning that Warning: Cannot update a component (`App`) while rendering a different component (`Backdrop`).

const [modal, setModal] = useState(false);

return{
 <View>
   <Button onPress={() => setModal(true)}/>
   <Backdrop modal={modal} callback={() => setModal(false)}/>
 </View>
}

const [count, setCount] = useState(0);

  useEffect(() => {
    if (modal) {
      setCount(3);
      const tmp = setInterval(() => {
        setCount(prev => {
          let newCount = --prev;
          if (newCount === 0) {
            callback();
            clearInterval(tmp);
          }
          return newCount;
        });
      }, 1000);
    }
  }, [modal]);

return{
 <Modal>
   <Text>{count}</Text>
 </Modal>
}

Answer 1

Don't update multiple states inside the useState updater function. Track the count in another useEffect , and close the modal when it reaches 0:

 const { useState, useEffect } = React; const Parent = () => { const [modal, setModal] = useState(false); return ( <div> <button onClick={() => setModal(true)}>Show modal</button> {modal && <Backdrop onClose={() => setModal(false)} />} </div> ); } const Backdrop = ({ onClose }) => { const [count, setCount] = useState(3); useEffect(() => { const interval = setInterval(() => { setCount(prev => prev - 1); }, 1000); return () => { clearInterval(interval); }; }, []); useEffect(() => { if (count === 0) onClose(); }); return <div>{count}</div>; }; ReactDOM.createRoot(root).render(<Parent />);

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"></div>