Javascript 反应错误-Can'；t在未安装的组件上执行React状态更新

每当我关闭登录页面时，我都会收到此错误。它在套接字中关闭。sendLoginRequest函数中的on（'LOGIN_RESULT'）。我需要使用useffect函数，但我不知道如何将其实现到我的loginPage组件中

loginPage.js------

从“React”导入React；
从“/loginpage.module.css”导入登录样式；
从'react redux'导入{connect}；
从“../messageStore/actions”导入{LOGIN}；
从“../../components/login/SectionLoader”导入SectionLoader；
从“../../components/login/SectionGetter”导入*作为SectionGetter；
从“../socket/ClientSocket”导入ClientSocket；
const loginPage=props=>{
//用户可以用来登录的弹出窗口
const socket=ClientSocket.getSocket（）；
const[loginda，setloginda]=React.useState（{//确认并推入Redux之前的临时登录信息
电子邮件：“”，
通过：“”，
});
const[loginState，setloginState]=React.useState（SectionGetter.GET_EMAILSECTION（“”））；
const[sentData，setSentData]=React.useState（false）；
const changeLogin=event=>{//更改用户输入的临时登录信息
const name=event.target.name；
常量值=event.target.value；
塞洛吉纳达({
…罗吉娜达，
[名称]：值
});
}
const validateInfo=（）=>{
如果（loginda.email！=“”）{
如果（loginda.pass！=“”）{
返回true；
}否则{
setloginState（SectionGetter.GET_PASSWORDSECTION（'请输入您的密码'）；
返回false；
}
}否则{
setloginState（SectionGetter.GET_EMAILSECTION（“请输入您的电子邮件”）；
返回false；
}
}
函数loginToApp（）{
如果（！sentData）{
if（validateInfo（））{
setloginState（SectionGetter.GET_LOADINGSECTION）；
setSentData（真）；
sendLoginRequest（）；
}
}
}
函数sendLoginRequest（）{
socket.emit（'LOGIN'{
电子邮件：loginda.email，
通行证：loginda.pass
});
socket.on（'LOGIN_RESULT'，data=>{
如果（data.result==='SUCCESS'）{
发送道具（登录（data.username、loginda.email、loginda.pass））；
分派（{type:'LOGIN_EXIT'，负载：null}）；
}否则{
setloginState（SectionGetter.GET_错误详细信息_节（“”））；
}
setSentData（假）；
});
}
const onNextSection=（）=>{
if（loginState.type==SectionGetter.PASSWORD）{
LoginToApp（）；
返回；
}
setloginState（SectionGetter.nextSection（loginState））；
}
常量退出=（）=>{
分派（{type:'LOGIN_EXIT'，负载：null}）；
}
返回(
/*
电邮：


通过：


记得我吗
登录
*/
);
}
常量mapStateToProps=状态=>{
返回{
电子邮件：state.loginDetails.email，
密码：state.loginDetails.password
};
}
导出默认连接（MapStateTops）（登录页面）；

index.js----

功能主页（道具）{
const setLoginState=状态=>{
console.log（状态）；
如果（州）{
分派（{type:'LOGIN_ACTIVE'，负载：null}）；
}否则{
分派（{type:'LOGIN_INACTIVE'，负载：null}）；
}
}
返回(
AXSHS现场直播
{props.loginActive===true？
: 
无效的
}
);
}
常量mapStateToProps=状态=>{
返回{
详细信息：state.loginDetails，
loginActive:state.loginActive
}
}
导出默认连接（MapStateTops）（主）；

---

使用socket.io和redux时，实现React-useEffect清理功能的正确方法是什么。我不确定是我的套接字导致了react状态更新还是redux connect功能。

在MyOpine中，没有人响应，因为您没有最小化问题，而是粘贴了所有代码bro…请创建一个代码沙盒

import React from 'react';
import loginstyles from './loginpage.module.css';
import { connect } from 'react-redux';
import { LOGIN } from '../messageStore/actions';
import SectionLoader from '../../components/login/SectionLoader';
import * as SectionGetter from '../../components/login/SectionGetter';
import ClientSocket from '../../socket/ClientSocket';

const loginPage = props => {

    //Pop up window that a user can use to login
    const socket = ClientSocket.getSocket();

    const [loginData, setLoginData] = React.useState({ //Temporary login info before confirmed and push into Redux
        email: '',
        pass: '',
    });

    const [loginState, setloginState] = React.useState(SectionGetter.GET_EMAILSECTION(''));

    const [sentData, setSentData] = React.useState(false);


    const changeLogin = event => { //Changes the temporary login info the user entered
        const name = event.target.name;
        const value = event.target.value;

        setLoginData({
            ...loginData,
            [name]: value
        });
    }

    const validateInfo = () => {
        if(loginData.email != "") {
            if(loginData.pass != "") {
                return true;
            } else {
                setloginState(SectionGetter.GET_PASSWORDSECTION('Please enter your password'));
                return false;
            }
        } else {
            setloginState(SectionGetter.GET_EMAILSECTION('Please enter your email'));
            return false;
        }
    }

    function loginIntoApp() {
        if(!sentData) {
            if(validateInfo()) {
                setloginState(SectionGetter.GET_LOADINGSECTION);
                setSentData(true);
                sendLoginRequest();
            }
        }
    }

    function sendLoginRequest() {
            socket.emit('LOGIN', {
                email: loginData.email,
                pass: loginData.pass
            });
            socket.on('LOGIN_RESULT', data => {   
                if(data.result === 'SUCCESS') {
                    props.dispatch(LOGIN(data.username, loginData.email, loginData.pass));
                    props.dispatch({ type: 'LOGIN_EXIT', payload: null} );
                } else {
                    setloginState(SectionGetter.GET_WRONGDETAILS_SECTION(''));
                }
                setSentData(false);
            });
    }

    const onNextSection = () => {
        if(loginState.type === SectionGetter.PASSWORD) {
            loginIntoApp();
            return;
        }
        setloginState(SectionGetter.nextSection(loginState));
    }

    const exit = () => {
        props.dispatch({ type: 'LOGIN_EXIT', payload: null });
    }

    return (
        /*<div className={loginstyles.loginArea}>
            <form className={loginstyles.loginform}>
                <div className={loginstyles.logincomponent}>
                    <label><div className={loginstyles.descriptiontext}>Email: </div>
                    <input type="text" className={loginstyles.loginform_textarea} />
                    </label><br />
                </div>
                
                <div className={loginstyles.logincomponent}>
                    <label><div className={loginstyles.descriptiontext}>pass: </div>
                    <input type="pass" className={loginstyles.loginform_textarea} />
                    </label><br />
                </div>

                <div className={loginstyles.logincomponent}>
                    <label>
                        Remember me <input type="checkbox" name="remember" className={loginstyles.loginform_remember} />
                    </label>
                </div>
                
                <div className={loginstyles.logincomponent} id={loginstyles.login}>
                    <button type="submit" className={loginstyles.loginform_submit}>Login</button>
                </div>
            </form>
        </div>*/
        <div className={loginstyles.loginArea}>
            <input type="image" src="/exit.svg" border="0" alt="Submit" onClick={exit} className={loginstyles.exit_image}/>
            <SectionLoader section={loginState.section} onNextSection={onNextSection.bind(this)} changeLogin={changeLogin.bind(this)} error={loginState.error} login={loginIntoApp.bind(this)}/>
        </div>
        
    );
}

const mapStateToProps = state => {
    return {
        email: state.loginDetails.email,
        password: state.loginDetails.password
    };
}


export default connect(mapStateToProps)(loginPage);

function Home(props) {


  const setLoginState = state => {
    console.log(state);
    if(state) {
      props.dispatch({ type: 'LOGIN_ACTIVE', payload: null });
    } else {
      props.dispatch({ type: 'LOGIN_INACTIVE', payload: null });
    }
  }


  return (
    <div>
      <Head>
          <title>AXSHS Live</title>
      </Head>
      {props.loginActive === true ? 
        <LoginPage/>
        : 
        null
      }
      <div className={props.loginActive === true ? homepage.app_loginactive : homepage.app}>
        
        <div className={homepage.home}>
          
          <Navbar username={props.details.username} loginState={setLoginState}/>
          
          <Grid />
          
        </div>
      </div>
      
    </div>
  );
}

const mapStateToProps = state => {
  return {
    details: state.loginDetails,
    loginActive: state.loginActive
  }
}

export default connect(mapStateToProps)(Home);