reactjs - 如何避免在useEffect中didmount时调用清理函数？

Question

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

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>
    </>
  );
}

我的代码笔链接：https ://codesandbox.io/s/xenodochial-gareth-ww9fi?file=/src/App.js:0-394

标签： reactjs

Answer 1

将一个空数组[]作为第二个参数传递给 useEffect。

除非您提供一系列依赖项，否则每次渲染都会清理并重新运行效果。传递一个空数组将导致它仅在挂载时运行并仅在卸载时清理。