反应如何修复失败的道具类型 - 类型字符串预期对象的无效道具

Question

I'm building a small react -app where among other things users can register, login and so on. For the Login, I have created a loginform with additional error validation, coming from the backend. Now when I try to login, and by purpose enter wrong credentials, nothing happens (which in some reason is right) but instead of my error messages, the console tells me about an error:

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

Here is the code:

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

I have no clue why that error appears!? Can someone help me out?

Answer 1

You are passing string as an error instead of object in the props for the Login component. Try console.log of "errors" in the component where Login component is rendered to see what value is getting set.

Answer 2

PropTypes expecting an object because of your propTypes definition

  erros: PropTypes.object.isRequired,

Use:

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

If it's no required your also have to define a defaultProp:

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

Login.defaultProps = {
  errors: '',
}

Answer 3

Make sure your link is not misspelled,

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

not

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

users not user