反应如何修复失败的支柱型 - 字符串预期目标的道具无效

Question

我建立一个小react-应用，其中除其他事项外的用户可以注册，登录等。对于登录，我创建了带有额外错误验证一个登录表单，从后端的到来。现在，当我尝试登录，并通过目的而进入错误的凭据，没有任何反应（在某些理由是正确的），但不是我的错误信息，控制台告诉我关于一个错误：

Failed prop type: Invalid prop `errors` of type `string` supplied to `Login`, expected `object`

下面是代码：

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import classnames from "classnames";
import { loginUser } from "../../actions/authActions";

class Login extends Component {
  constructor() {
   super();
   this.state = {
     email: "",
     password: "",
     errors: {}
   };

   this.onChange = this.onChange.bind(this);
   this.onSubmit = this.onSubmit.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.auth.isAuthenticated) {
      this.props.history.push("/mysite");
    }

    if (nextProps.errors) {
     this.setState({ errors: nextProps.errors });
    }
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  onSubmit(e) {
    e.preventDefault();

    const userData = {
      email: this.state.email,
      password: this.state.password
    };

    this.props.loginUser(userData);
  }

  render() {
    const { errors } = this.state;

    return (
      <div className="login">
        <div className="container">
          <div className="row">
            <div className="col-md-8 m-auto">
              <h1 className="display-4 text-center">Log In</h1>
               <p className="lead text-center">Sign in to your account</p>
               <form noValidate onSubmit={this.onSubmit}>
                 <div className="form-group">
                  <input
                   type="email"
                     className={classnames("form-control form-control-lg", {
                  "is-invalid": errors.email
                   })}
                  placeholder="Email Address"
                  name="email"
                  value={this.state.email}
                  onChange={this.onChange}
                 />
                 {errors.email && (
                   <div className="invalid-feedback">{errors.email}</div>
                 )}
               </div>
               <div className="form-group">
                 <input
                  type="password"
                  className={classnames("form-control form-control-lg", {
                  "is-invalid": errors.password
                  })}
                  placeholder="Password"
                  name="password"
                  value={this.state.password}
                  onChange={this.onChange}
                 />
                {errors.password && (
                  <div className="invalid-feedback">{errors.password}</div>
                )}
              </div>
              <input type="submit" className="btn btn-info btn-block mt-4" />
             </form>
           </div>
         </div>
       </div>
     </div>
    );
  }
}

Login.propTypes = {
  loginUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  errors: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth,
  errors: state.errors
});

export default connect(
  mapStateToProps,
 { loginUser }
)(Login);

我不知道为什么会出现这个错误！？有人可以帮我吗？

Answer 1

你逝去的字符串作为一个错误，而不是对象的道具登录组件。尝试在登录组件被渲染看到的是越来越设置什么值的组件“错误”的console.log。

Answer 2

PropTypes期待，因为你propTypes定义的对象

  erros: PropTypes.object.isRequired,

采用：

Login.propTypes = {
  loginUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  errors: PropTypes.string.isRequired
};

如果它没有要求你也必须定义一个defaultProp：

Login.propTypes ={
  errors: PropTypes.string,
}

Login.defaultProps = {
  errors: '',
}

Answer 3

确保你的链接没有拼写错误，

export const loginUser=(userData)=>dispatch=>{
  axios.post('/api/users/login',userData)

不

export const loginUser=(userData)=>dispatch=>{
  axios.post('/api/user/login',userData) 

用户没有用户