reactjs - setTimeout() 不断重启 react

Question

我有一个应该在 30 秒后打开的弹出窗口。因此我的函数看起来像下面显示的那样。但是在我关闭它之后它会不断重复弹出 - 在 30 秒或更短的时间内。我做错了什么？

export default function MyElement() {

 const [popupper, setPopupper] = React.useState(false);

 const handlePopupClick = () => {
    setPopupper(!popupper);
 }

 useEffect(() => setTimeout(() => {
   setTimeout(() => {
      setPopupper(true);
   }, 30000);
 });

 return (
   <div name='popupthing' hidden={!popupper}>
     ....
   </div>
 ); 
}

Answer 1

将空数组设置为 useEffect 的第二个参数，本质上告诉 React 在初始渲染后只运行传递的函数:

useEffect(() => setTimeout(() => {
   setTimeout(() => {
     setPopupper(true);
   }, 30000);
}, []); // Add empty array here.

docs give an in-depth explanation if you're interested.