[英]Warning: Can't perform a React state update on an unmounted component hooks
我收到此错误,但我不明白这意味着什么或如何摆脱它:
警告:无法对卸载的组件执行 React 状态更新。 这是一个空操作,但它表明您的应用程序中存在内存泄漏。 要修复,请取消 useEffect 清理函数中的所有订阅和异步任务。 在登录(在 App.js:93)
我需要安装功能吗??
这是我的 app.js 文件:
import React, { useState, useEffect } from 'react';
import {BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import {authenticationService} from '../services/authentication.service';
import Home from '../Pages/Desktop/Desktop';
import Login from '../Pages/Login_Register/Login';
import Register from '../Pages/Login_Register/Register';
import history from '../history';
const App = (props) => {
const [currentUser, setCurrentUser] = useState(null);
const [isAdmin, setIsAdmin] = useState(null);
const [isVIP1, setIsVIP1] = useState(false);
const [name, setName] = useState(null);
const [id, setId] = useState('');
useEffect(() => {
authenticationService.currentUser.subscribe(z => {
setCurrentUser(z)
});
}, [])
return (
<div history={history}>
<Router>
<Nav>
<div>
</div>
<div>
<div>
<div>
<Switch>
<Route path="/register">
<Register />
</Route>
<Route path="/login">
<Login />
</Route>
<Route path="/home">
<Home />
</Route>
</Switch>
</div>
</div>
</div>
</Router>
</div>
);
}
export default App;
因为它说它在登录这里是我的 login.js
import React, { useState } from 'react';
import {authenticationService} from '../../services/authentication.service';
import { Redirect } from 'react-router'
import { useForm } from 'react-hook-form';
import './login_register.css';
export default function Login({props}) {
const [currentUser, setCurrentUser] = useState(null);
const [isAdmin, setIsAdmin] = useState(null);
const [isVIP1, setIsVIP1] = useState(false);
const [name, setName] = useState(null);
const [id, setId] = useState('')
const [submitted, setSubmitted] = useState(false);
const { register, handleSubmit, errors } = useForm();
if (submitted) {
return <Redirect push to={{
pathname: '/home'
}}
/>
}
const onSubmit=(data) => {
authenticationService.login(data)
.then(
user => {
const userdata = JSON.stringify(user)
setSubmitted(true)
setName(userdata.fornavn)
},
error => {
console.log(error);
}
);
}
return (
<div>
<h2>log ind</h2>
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<div>
<input name="email" type="text" ref={register({required: true})} />
</div>
<div>
<input name="password" type="password" ref={register({required: true})}/>
</div>
<div >
<button type="submit">logind</button>
</div>
</div>
</form>
</div>
)
}
现在因为我没有在我的代码中使用异步任务,那不可能,但是订阅是什么?? 我如何清理我没有的东西?
您的罪魁祸首几乎肯定在您的useEffect()
。 它应该是这样的:
useEffect(() => {
authenticationService.currentUser.subscribe(z => {
setCurrentUser(z)
});
return () => {
// some function call that cancels the subscription like...
// authenticationService.currentUser.unsubscribe()
}
}, [])
取消订阅功能的样子完全取决于您的设置以及您希望如何处理它。
此错误消息的要点实际上只是说在此页面之外有一个函数被调用,并且此页面期待返回响应,但该页面现在正在卸载,因此回调将永远无法到达。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.