Реагируйте на ошибку типа в ax ios callback TypeError: this.setState не является функцией

Question

Я знаю, что многие вопросы связаны с этим уже при переполнении стека, но я новичок, чтобы реагировать, а также переполнение стека, и я не мог найти никакого решения. Итак, я застрял. поэтому каждый раз, когда я пытался реализовать этот код, я получал TypeError: this.setState не является ошибкой функции, и код уже находится в ES6. В этой строке происходит ошибка: this.setState ({token: true}); . Я не знаю, как установить там состояние. Я связал функцию loginSubmit с этим , но он все еще не работает ...

  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;

, и из-за этого автоматическое перенаправление c не работает, я должен Refre sh страницу каждый раз, чтобы перенаправить в профиль. Код перенаправления ниже.

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

Answer 1

Обновление:

Вы повторно назначаете this.setState, когда его нужно рассматривать как неизменяемый:

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

Никогда не изменяйте это. напрямую, так как вызов setState () впоследствии может заменить сделанную вами мутацию. Обрабатывайте this.state, как если бы оно было неизменным.

А затем вызывая this.setState асинхронно в axios.

---

Без производимого примера это может быть потому, что вы не связали loginSubmit с this экземпляром.

Существует несколько способов обеспечить доступ функций к атрибутам компонента, таким как 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) внутри конструктора класса.