Question

我正在尝试学习useState和useEffect，这些东西我已经开始学到了，但是当React表示我发生内存泄漏时，它变得不粘滞。坦白地说，尽管查看了React documentation，但我什至没有意识到自己之前曾在创建内存泄漏，并且我仍然不确定是什么原因造成的。

如果有人不介意查看我下面为一个非常简单的导航栏编写的内容，我将不胜感激。

import React, { useEffect, useState } from 'react';
import { useAuth } from '../context/auth';
import Login from '../pages/Login';
import { Button, Nav, Navbar } from 'react-bootstrap';

function NavBar(props) {
  const { setAuthTokens } = useAuth();
  const { authTokens } = useAuth();
  const [isLoggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    if (authTokens) setLoggedIn(true);

    return function cleanup() {
      setLoggedIn();
    };
  }, [isLoggedIn, authTokens]);

  function logOut() {
    setAuthTokens();
  }

  return isLoggedIn ? (
    <div>
      <Navbar bg="light" expand="lg">
        <Navbar.Brand href='/'>The System</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link href='/dashboard'>Dashboard</Nav.Link>
            <Button onClick={logOut}>Log out</Button>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </div>
  ) : (
    <div>
      <Navbar bg="light" expand="lg">
        <Navbar.Brand href='/'>The System</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Login />
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </div>
  );
}

export default NavBar;

Answer 1

useEffect中的返回函数等效于componentWillUnmount。因此，在卸载时，应调用注销方法（如果您不保留会话）。

我是否正在使用useEffect并正确取消订阅？

1 个答案: