Reactjs 如何避免在didmount处于useEffect状态时调用清理函数？

我有一个函数，应该在卸载时调用它。但它会在第一次挂载时调用。 有什么办法解决这个问题吗

import React, { useEffect, useState } from "react";
import "./styles.css";
import Modal from "./Modal";

export default function App() {
  const [modal, setModal] = useState(false);
  
  useEffect(() => {
    return () => {
      console.log("unmount");
    };
  }, []);
  return (
    <>
      {modal && <Modal />}
      <button onClick={() => setModal(true)}>Click Me</button>
    </>
  );
}

import React，{useffect，useState}来自“React”；
导入“/styles.css”；
从“/Modal”导入模态；
导出默认函数App（）{
const[modal，setModal]=useState（false）；
useffect（（）=>{
return（）=>{
控制台日志（“卸载”）；
};
}, []);
返回(
{modal&&}
setModal（true）}>单击我
);
}

---

我的代码笔链接：

将空数组

[]

作为第二个参数传递给useEffect

---

除非提供依赖项数组，否则效果将被清除并在每次渲染时重新运行。传递空数组将导致它仅在装载时运行，而仅在卸载时清理。

传递空数组作为第二个参数以使用效果

---

除非提供依赖项数组，否则效果将被清除并在每次渲染时重新运行。传递空数组将导致它仅在装载时运行，而仅在卸载时清理。

您可以在控制台中看到

卸载

，因为在装载

模态

组件时出错。当错误显示

App

组件已卸载时，在您的代码沙盒链接中。

---

每次重新加载codesandbox也会在您更改组件时重新安装组件。

您会在控制台中看到

卸载

，因为在安装

模态

组件时出错。当错误显示

App

组件已卸载时，在您的代码沙盒链接中。

---

每次重新加载codesandbox也会在您更改组件时重新装载它。

它没有被调用，问题是

Modal.js

是空的，因此当单击按钮时，它会中断应用程序，并调用

unmount

回调。上面的代码是在组件使用useEffect卸载时执行代码的方法，即从传递给useEffect的函数返回函数。问题是，

Modal.js

为空，因此单击按钮时会中断应用程序，此时调用

unmount

回调。上面的代码是在组件使用useffect卸载时执行代码的方法，即从传递给useffect的函数返回函数