Question

我有点反应，无法创建身份验证应用程序。

每当我单击登录时，我都需要单击两次登录链接才能登录。每当我按两次登录名登录后，我都会转到我的家庭组件，但是，我收到一条警告消息：

无法在已卸载的组件上执行React状态更新。

这是一个禁忌，但它表明您的应用程序中发生内存泄漏。要解决此问题，请取消所有订阅和异步任务 componentWillUnmount方法。

我想知道我的代码哪里出错了。

这是我的login.js的片段。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Login extends Component {
    constructor(props){
        super(props);
        this.state = {
            login: false,
        }
    }


    checkUser(event){
        event.preventDefault();
        let data= {
            email: this.refs.email.value,
            password: this.refs.password.value,
        }
        var request = new Request('http://localhost:3001/api/login', {
            method: 'POST', 
            headers: new Headers({ 'Content-Type' : 'application/json' }),
            body: JSON.stringify(data)
        });

        fetch(request).then((response) => {
            response.json().then((data) => {
                //console.log(data.value);
                this.setState({login: data.value});
            })
        }).catch(function(err){
            console.log(err)
        });
    }

    render (){
        console.log(this.state.login);
        const linkTo = this.state.login ? "/home" : "/login"
        console.log(linkTo);
        return (
            <div> 
                <form>
                    <label>Email</label>
                    <input type="text" ref="email" placeholder="Email"></input>
                    <label>Password</label>
                    <input type="password" ref="password" placeholder="Password"></input>
                    <button onClick = {this.checkUser.bind(this)}>
                        <Link to={linkTo}>Login</Link>
                    </button>
                </form>
                <p>Dont have an account? <Link to="/register">Register</Link></p>
            </div>
        )
    }
}

当我正确登录时，控制台显示/home，但是我的页面无法显示，因此我需要再次按下按钮。

任何帮助将不胜感激。

Answer 1

您的整个逻辑非常有问题。您的按钮需要触发登录过程，仅此而已。它不能同时是“登录”按钮和链接。登录完成后，您可以手动重定向到所需的任何位置。例如：

app.listen(port, listening)

按钮：

app(port, listenting)

Answer 2

您的逻辑不清楚。最初，您假定用户尚未登录，如果可以肯定地知道这一点，则无需致电checkUser。但是，因为您不确定要调用登录API-也许这是对登录API的唯一调用？

最好的选择是删除<Link to={linkTo}>Login</Link>和const linkTo = this.state.login ? "/home" : "/login"

然后在checkUser内成功登录programatically navigate到/login：

this.props.history.push('/login')

OR

render() {
  if (this.state.login) return <Redirect to="/login" />;
  ...
}

您可以将链接放在其他任何地方。只是不要将其包装在按钮中，因为该功能将与按钮上附加的功能发生冲突。 避免将链接包装在按钮中，反之亦然，只是使用纯HTML，它们的功能是独立的，并且会发生冲突。

一个或另一个：

设置链接外观使其看起来像按钮，或者
如果您确实需要使用按钮进行导航，请按照编程方式进行操作-通常，这对SEO不利。但是对于登录表单来说就可以了。

必须单击两次链接才能使链接生效

2 个答案: