无法通过 React 前端和 Flask 后端集成

Question

I am trying to integrate my React frontend with Flask Backend. However I am unable to do so. When I open my "Forum" page and try to login with the credentials Username: pranay_kothari and Password: 1234 (Haven't fixed the "Sign Up" page, so manually added this in my database) It gives an error message that I am unable to understand.

Here is the Error Message:

Unhandled Rejection (TypeError): Cannot read property 'data' of undefined
(anonymous function)
C:/Users/Administrator/Desktop/Problems/src/components/forms/LoginForm.jsx:40
  37 | this.setState({loading:true});
  38 | this.props.submit(this.state.data)
  39 |     .catch(err => this.setState({
> 40 |         errors: err.response.data.errors,
  41 |         errors: {global: false},
  42 |         loading:false
  43 |     }));

Login Form is as follows:

import React, {Component} from 'react'
import {Form, Button, Message} from 'semantic-ui-react';
import InlineError from '../misc/InlineError';
import './LoginForm.css';

class LoginForm extends Component{
    constructor(props){
        super(props);
        this.state={
            data:{
                "username":'',
                "password":''
            },
            loading:false,
            errors:{},
        }
        this.onChange=this.onChange.bind(this);
        this.onSubmit=this.onSubmit.bind(this);
    }
    onChange = (e) =>{
        this.setState({
            data:{...this.state.data,[e.target.name]: e.target.value}
        })
    }
    onSubmit = () =>{
        const errors={};
        if(!this.state.data.username){
            errors.username= "username required";
        }
        if(!this.state.data.password){
            errors.password="password required";
        }
        this.setState({
            errors:errors
        })
        if(Object.keys(errors).length === 0){
            this.setState({loading:true});
            this.props.submit(this.state.data)
                .catch(err => this.setState({
                    errors: err.response.data.errors,
                    errors: {global: false},
                    loading:false
                }));
        }
    }


    render(){
        return(
            <Form onSubmit={this.onSubmit} loading={this.state.loading} className = "Login-Form">
                {this.state.errors.global && (
                    <Message negative>
                        <Message.Header>Something went wrong</Message.Header>
                        <p>{this.state.errors.global}</p>
                    </Message>
                    )}
                <Form.Field error={!!this.state.errors.username}>
                    <label htmlFor="username" style = {{color: "white"}}>Username</label>
                    <input className="Login-Inputs"
                        type="username"
                        id="username"
                        name="username"
                        placeholder="username"
                        value={this.state.data.username}
                        onChange={this.onChange}
                    />
                    {this.state.errors.username && <InlineError text={this.state.errors.username}/>}
                </Form.Field>
                <Form.Field error={!!this.state.errors.password}>
                    <label htmlFor="password" style = {{color: "white"}}>Password</label>
                    <input
                        className="Login-Inputs"
                        type="password"
                        id="password"
                        name="password"
                        placeholder="password"
                        value={this.state.data.password}
                        onChange={this.onChange}
                    />
                    {this.state.errors.password && <InlineError text={this.state.errors.password}/>}
                </Form.Field><br/>
                <Button primary className = "Login-Button" style={{marginLeft: "7vw"}}>Login</Button>
            </Form>
        );
    }
}
export default LoginForm;

The onSubmit is passed to it by its parent component which is as follows:

import React,{Component}from 'react';
import PropTypes from 'prop-types';
import LoginForm from '../forms/LoginForm';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
import {login} from '../../actions/auth';
import './LoginPage.css';
import Header from '../Shared/Header(fixed)/headerFixed';
import TopMenu from '../Shared/topMenu';

class LoginPage extends Component{

    constructor(props){
        super(props);
        this.submit=this.submit.bind(this);
    }

    submit=(data)=>{
        return this.props.login(data)
            .then(() => this.props.history.push("/forum"));
    }
    render(){
        return(
            <div className = "Login-Page-Body">
                <Header/>
                <TopMenu/>
                <div className = "Login-Page-Head">
                <h1 className = "Login-title">Login Page</h1>
                <LoginForm submit={this.submit}/><br/>
                <div className = "To-signup">Don't have an account? <Link to="/signup">Sign up here</Link></div>
                </div>
            </div>
        )
}
}
LoginPage.propTypes= {
    history: PropTypes.shape({
        push: PropTypes.func.isRequired
    }).isRequired,
    login: PropTypes.func.isRequired
}

export default connect(null, {login})(LoginPage);

We connect this with the backend by the following code:

The file 'api.jsx' is as follows:

The Backend function for this route is as follows:

@app.route('/backend/login', methods=["POST", "GET"])
def login():
    content = request.get_json()
    usern = content["credentials"]["username"]
    password = content["credentials"]["password"]
    # usern = "pranay_kothari"
    # password = "1234"
    # print(content["credentials"])

    user = Login.query.filter(Login.username == usern, Login.password == password).first()

    if user is None:
        return 'ID does not exist', 501

    token = encode_auth_token(usern)

    dict = {
        'token': token.decode(),
        'username': usern,
        'password': password
    }

    return make_response(jsonify(dict))

I know all this information might not be enough to figure out the problem so here is the link to the Github repository which contains my entire source code: Source Code

I am working on a full stack project for the first time so it would be great if you could also explain what is it that I am doing incorrectly.

Please help!

Answer 1

.catch(err => this.setState({
     errors: err.response.data.errors,
     errors: {global: false},
      loading:false
}));

err.response is undefined. That means 'err' object does not have any property call response. First look at the 'err' object first by,

console.log(err);

To see what it contains.