無法通過 React 前端和 Flask 后端集成

Question

我正在嘗試將我的 React 前端與 Flask 后端集成。 但是我無法這樣做。 當我打開我的“論壇”頁面並嘗試使用憑據登錄時 用戶名：pranay_kothari 和密碼：1234（尚未修復“注冊”頁面，因此在我的數據庫中手動添加）它給出了一條錯誤消息，我是無法理解。

這是錯誤消息：

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 |     }));

登錄表格如下：

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;

onSubmit由其父組件傳遞給它，如下所示：

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);

我們通過以下代碼將其與后端連接：

文件“api.jsx”如下：

該路由的后端function 如下：

@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))

我知道所有這些信息可能不足以找出問題，所以這里是指向 Github 存儲庫的鏈接，其中包含我的整個源代碼：源代碼

我是第一次從事全棧項目，所以如果你也能解釋一下我做錯了什么，那就太好了。

請幫忙！

Answer 1

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

err.response 未定義。 這意味着 'err' object 沒有任何屬性調用響應。 首先看一下'err' object，

console.log(err);

看看它包含什么。