javascript - 使用 Python 实现身份验证时 react 类型错误

Question

我正在尝试使用 Python 和 React 实现身份验证，但我在前端收到此错误消息。

TypeError: Cannot read property 'loading' of undefined

这是我的 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);

我删除了输入部分，因为我认为没有问题。如果有人认为输入部分有问题，我会很乐意发布。

这是我的 reducers/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;

Answer 1

错误表明它无法在 undefined object 中找到加载的属性。也许您的 state.auth 为空或未定义。尝试记录 state.auth 以检查它是否有值。