javascript - 使用 Python 实现身份验证时出现反应类型错误
问题描述
我正在尝试使用 Python 和 React 实现身份验证,并且在前端出现此错误消息。
TypeError:无法读取未定义的属性“加载”
这是我的 SignIn.js
import React, { Component } from "react";
import { Button, Checkbox, Form, Icon, Input } from "antd";
import { Link, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import { authLogin } from "../store/actions/auth";
class SignIn extends React.Component {
state = {
username: "",
password: ""
};
handleChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
handleSubmit = e => {
e.preventDefault();
const { username, password } = this.state;
this.props.login(username, password);
};
render() {
const { getFieldDecorator } = this.props.form;
const { error, loading, token } = this.props;
const { username, password } = this.state;
if (token) {
return <Redirect to="/" />;
}
return (
<div className="gx-login-container">
<div className="gx-login-content">
<div className="gx-login-header gx-text-center">
<h1 className="gx-login-title">Sign In</h1>
</div>
{error && <p>{this.props.error.message}</p>}
<React.Fragment>
<Form onSubmit={this.handleSubmit} className="gx-login-form gx-form-row0">
{getFieldDecorator('email', {
rules: [{ required: true, message: 'Please input your email!' }],
})(
<Button type="primary" htmlType="submit" loading={loading} disabled={loading}>
Log in
</Button>
</Form>
</React.Fragment>
</div>
</div>
);
}
}
const mapStateToProps = state => {
return {
loading: state.auth.loading,
error: state.auth.error,
token: state.auth.token
};
};
const mapDispatchToProps = dispatch => {
return {
login: (username, password) => dispatch(authLogin(username, password))
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(SignIn);
我删除了输入部分,因为我认为没有问题。如果有人认为输入部分是问题,我会很乐意发布它。
这是我的减速器/auth.js
import * as actionTypes from "../actions/actionTypes";
import { updateObject } from "../utility";
const initialState = {
token: null,
error: null,
loading: false
};
const authStart = (state, action) => {
return updateObject(state, {
error: null,
loading: true
});
};
const authSuccess = (state, action) => {
return updateObject(state, {
token: action.token,
error: null,
loading: false
});
};
const authFail = (state, action) => {
return updateObject(state, {
error: action.error,
loading: false
});
};
const authLogout = (state, action) => {
return updateObject(state, {
token: null
});
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case actionTypes.AUTH_START:
return authStart(state, action);
case actionTypes.AUTH_SUCCESS:
return authSuccess(state, action);
case actionTypes.AUTH_FAIL:
return authFail(state, action);
case actionTypes.AUTH_LOGOUT:
return authLogout(state, action);
default:
return state;
}
};
export default reducer;
解决方案
错误表明它无法在未定义的对象中找到加载的属性。也许您的 state.auth 为 null 或未定义。尝试记录 state.auth 以检查它是否有值。