必须单击链接两次才能使链接正常工作答案

【问题标题】：Have to Click link Twice in order for Link to work必须单击链接两次才能使链接正常工作
【发布时间】：2020-06-14 06:22:08
【问题描述】：

我对反应有点陌生，并且在创建身份验证应用程序时遇到了麻烦。

每当我点击登录时，我都需要点击登录链接两次才能登录。每当我按两次登录登录后，我都会被定向到我的主组件，但是，我会收到一条警告消息：

无法对未安装的组件执行 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，所以我需要再次按下按钮。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你的逻辑不清楚。最初您假设用户没有登录，如果您确定这一点，那么您不需要致电checkUser。但是，因为您不确定是否调用了登录 API - 或者这可能是对登录 API 的唯一调用？

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

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

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

或

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

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

做一个或另一个：

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

【讨论】：

谢谢，它有效！是的，我将 false 设置为默认值，因为用户未登录。当用户单击按钮时，它会调用 API 来检查用户是否已登录并且凭据是否匹配，然后状态更改为 true。谢谢你的提示！
@James 谢谢詹姆斯，我建议选择一个答案作为已接受的答案，以帮助其他人更轻松地找到解决方案。另一个答案也很中肯。

【解决方案2】：

你的整个逻辑有很大问题。您的按钮需要触发登录过程，仅此而已。它不能既是“登录”按钮，又是链接。登录完成后，您可以手动重定向到您想要的任何地方。例如：

fetch(request).then((response) => {
            response.json().then((data) => {
                //Do some checking if the login is successful..
                //if it is, redirect:
                this.props.history.push('/home')
            })
        }).catch(function(err){
            console.log(err)
        });

按钮：

<button onClick = {this.checkUser.bind(this)}>Login</button>

【讨论】：