React 警告：无法对卸载的组件执行 React 状态更新

Question

我知道之前有人问过这个问题，但是，我尝试了许多建议的修复方法，但都没有运气。

完整错误如下所示：

我想这是我的 Login 组件中的一个问题，查看 main_chunk 会导致我将按钮对象传递给 Login 组件的位置，这是一个模态的实现。

在我的头组件渲染中，我实现了登录组件，如下所示：

<Login  
    button = { <GreyButton>Login</GreyButton> } 
    loginState = { (value: boolean) => this.setState({ loggedIn: value }) }
    tokenValue = { this.saveToken }
/>

完整的登录组件：

import React, { useState } from 'react';
import styled from 'styled-components';
import Popup from 'reactjs-popup';
import { LoginButton } from '../ui/Buttons';
import { LoginError } from './InputError';

//Styling for popup
const StyledPopup = styled(Popup)`
    &-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 10px;
        border: 1px solid #4d4d4d;
        width: 20%;
        text-align: center;

        & span {
            color: #aaa;
            float: right;
            font-size: 28px;
            margin-top: -15px;
            font-weight: bold;

            &:hover {
                color: black;
                text-decoration: none;
                cursor: pointer;
            }

            &:focus {
                color: black;
                text-decoration: none;
                cursor: pointer;
            }
        }

        & h1 {
            width: 95%;
            font-size: 36px;
            margin: auto;
            text-align: center;
            padding: 5px;
            padding-top: 15px;
        }

        & form {
            text-align: left;
            display: inline-grid;
            padding-top: 20px;
            box-sizing: content-box;

            & input {
                margin-bottom: 15px;
                height: 30px;
                width: 280px;
                border-width: 0 0 2px;
                border-color: #000;
                display: inline-block;
                outline: none;

                &:focus {
                    border-color: #206dc5;
                }
            }
        }
    }

    &-overlay {
        background: rgba(0, 0, 0, 0.5);
    }  
`

//Default props
interface Props {
    button: any;
    loginState: (state: boolean) => void;
    tokenValue: (token: string) => void;
}


export const Login: React.FC<Props> = (
    { 
        button,
        loginState,
        tokenValue
     }
) => {  
    //Hooks
    const [emailValue, setEmailValue] = useState<string>('');
    const [passwordValue, setPasswordValue] = useState<string>('');
    const [error, setError] = useState<any>(<div> </div>);

    //Input change handlers
    const handleEmailChange = (e) => {
        setEmailValue(e.target.value);
    }

    const handlePasswordChange = (e) => {
        setPasswordValue(e.target.value);
    }

    //Login button click handler
    const handleLoginPress = (e, close) => {
        setError(
            <LoginError
                email = { emailValue }
                password = { passwordValue }
            />
        )

        //Post request to backend
        fetch('http://localhost:8080/api/account/signin/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                email: emailValue,
                password: passwordValue
            })
        })
        .then(res => res.json())
        .then(json => {
            if (json.success) {
                console.log("logged in");
                loginState(true);
                tokenValue(json.token);
                close();
            }
        })
    }

    return (
        <StyledPopup
            trigger={button}
            modal
            nested
        >
            {close => (
                <div>
                    <span onClick={close}>&times;</span>
                    <h1>LOGIN</h1>
                    <form noValidate>
                        <label><b>EMAIL</b></label>
                        <input 
                            type = "email"
                            placeholder = "john@smith.com"
                            onChange = { handleEmailChange }  
                        ></input>

                        <label><b>PASSWORD</b></label>
                        <input 
                            type = "password" 
                            placeholder = "********" 
                            onChange = { handlePasswordChange }
                        ></input>
                    </form>

                    { error }

                    <LoginButton
                        onClick = {  (e) => { handleLoginPress(e, close) } }
                        >Login
                    </LoginButton>
                </div>
            )}
        </StyledPopup>
    );
}

错误消息提示问题出在按钮传递时的登录组件的片段：

export const Login: React.FC<Props> = (
    { 
        button,
        loginState,
        tokenValue
     }
) => {  

根据我的阅读，我不认为实际问题在于道具中按钮的传递，我不知道 useEffect 会有什么帮助（至少我没有成功），并怀疑 http 请求可能会给我带来一些问题？