Question

我知道很多问题都已经在堆栈溢出上与此相关，但是我是新来的反应者，也是堆栈溢出，我找不到任何解决方案，所以我被困住了。因此，每次我尝试实现此代码时，我都会遇到TypeError：this.setState不是函数错误，并且代码已经在ES6中。错误发生在此行上： this.setState（{token：true}）; 。我不知道如何在其中设置状态。我已经将loginSubmit函数绑定到 this ，但是它仍然无法正常工作...


  import React from 'react';
import './Login.css';
import axios from 'axios';
import {Redirect} from 'react-router-dom';

class Login extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            username : '',
            password : '',
            token : false
        }
        this.onChangeHandler = this.onChangeHandler.bind(this);
        this.loginSubmit = this.loginSubmit.bind(this);
    }
    componentDidMount(){
        let token = localStorage.getItem('token');
        if(token!==null && token!==undefined){
            this.setState({token : true});
        }
    }
    onChangeHandler(event){
        this.setState({[event.target.id]:event.target.value});
        console.log(this.state.username,this.state.password);
    }
    loginSubmit(event){
        event.preventDefault();
        let loginFormData = new FormData();
        loginFormData = {
            'username' : this.state.username,
            'password' : this.state.password
        }
        axios({
            method : 'post',
            url : 'http://localhost:3001/loginApi',
            data : loginFormData
        })

        .then((response)=>{

            if(response.data.msg=="database error"){
                console.log("database error");
            }
            if(response.data.msg=="no user found username or password incorrect"){
                console.log("no user found username or password incorrect");
            }
            if(response.data.msg=="jwt error"){
                console.log("jwt error");
            }
            if(response.status==200 && response.data.result!=null && response.data.result!=undefined && response.data.token!=null && response.data.token!=undefined){
                console.log("user logged in && loginapi response.data.result:",response.data.result,response.data.token);
                localStorage.setItem('token',response.data.token);
                this.setState({token : true});
            }
        })
        .catch((response)=>{
            console.log("catch response api call fail:",response);
            localStorage.removeItem('token');
        });
        this.setState = {
            username : '',
            password : ''
        }
    }

    render(){
        if(this.state.token){
            return <Redirect to='/profile' />
        }
        return(
            <>
            <div className="all">
                <div className="sidenav">
                    <div className="login-main-text">
                        <h2>Application<br/> Login Page</h2>
                        <p>Login from here to access.</p>
                    </div>
                </div>
                <div className="main">
                    <div className="col-md-6 col-sm-12">
                        <div className="login-form">
                            <form>
                                <div className="form-group">
                                    <label>User Name</label>
                                    <input name="username" id="username" value={this.state.username} onChange={(event)=>this.onChangeHandler(event)} type="text" className="form-control" placeholder="User Name"/>
                                </div>
                                <div className="form-group">
                                    <label>Password</label>
                                    <input name="password" id="password" value={this.state.password} onChange={(event)=>this.onChangeHandler(event)} type="password" className="form-control" placeholder="Password"/>
                                </div>
                                <button name='logionSubmit' id='logionSubmit' onClick={(event)=>this.loginSubmit(event)} type="submit" className="btn btn-black">Login</button>
                            </form>
                        </div>
                    </div>
                </div>
                </div>
            </>
        );
    }
}

export default Login;

，由于这个原因，自动重定向无法正常工作，因此每次都必须刷新页面以重定向到配置文件。重定向代码如下。

   render(){
        if(this.state.token){
            return <Redirect to='/profile' />
        }
        return( and then some jsx code goes here);

Answer 1

更新：

You are re-assiging this.setState，当需要将其视为不可变时：

this.setState = {
  username: "",
  password: "",
};

请不要直接更改this.state，因为之后调用setState（）可能会替换您所做的更改。将this.state视为不可变。

然后在this.setState中异步调用axios。

没有可生产的示例，可能是因为you didn't bind loginSubmit to this instance.

有多种方法可以确保函数可以访问组件属性，例如this.props和this.state，具体取决于您使用的语法和构建步骤。

// Class Properties
loginSubmit = (event) => {
  ...
}

或将其绑定在构造函数中：

// Bind in constructor
constructor(props) {
  super(props)
  this.loginSubmit = this.loginSubmit.bind(this);
}

Answer 2

很难从代码中分辨出来，因为您需要共享更多代码，这可能是因为您需要在类构造函数中调用super(props)。

在axios回调TypeError中反应typeerror：this.setState不是函数

2 个答案: