如何解决我是否正在使用useEffect并正确取消订阅?
我正在尝试学习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;
解决方法
useEffect中的返回函数等效于componentWillUnmount。因此,在卸载时,应调用注销方法(如果您不保留会话)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。