警告：无法在未安装的组件挂钩上执行 React 状态更新答案

【问题标题】：Warning: Can't perform a React state update on an unmounted component hooks警告：无法在未安装的组件挂钩上执行 React 状态更新
【发布时间】：2020-12-20 19:14:15
【问题描述】：

我收到此错误，但我不明白它的含义或如何摆脱它：

警告：无法对未安装的组件执行 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>
    )
}

现在，因为我没有在我的代码中使用异步任务，所以不可能，但是订阅是什么？以及如何清理我没有的东西？

【问题讨论】：

标签： reactjs react-hooks use-effect

【解决方案1】：

你的罪魁祸首几乎肯定在你的useEffect()。它应该看起来像这样：

useEffect(() => {
  authenticationService.currentUser.subscribe(z => {
    setCurrentUser(z) 
  });
  return () => {
  // some function call that cancels the subscription like...
  // authenticationService.currentUser.unsubscribe()
  }
}, [])

取消订阅功能的外观完全取决于您的设置以及您希望如何处理它。

此错误消息的要点实际上只是说在此页面之外调用了一个函数，并且此页面期待响应，但该页面现在正在卸载，因此回调永远不会到达它。

【讨论】：