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

Answer 1

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

除非您提供一系列依赖项，否则效果将被清除并在每个渲染器上重新运行。传递空数组将导致它仅在安装时运行，而仅在卸载时清除。

Answer 2

您在控制台中看到unmount，因为在安装Modal组件时出错。当错误显示您的App组件已卸载时，在codesandbox链接中。并且每次重新加载codeandbox也会在更改组件时重新安装组件。

在useEffect中使用didmount时如何避免清除函数被调用？

2 个答案: