Question

我正在构建一个小型react-app，用户可以在其中注册，登录等。对于登录，我创建了一个带有附加错误验证的loginform，来自后端。现在，当我尝试登录并故意输入错误的凭据时，什么也没发生（出于某种原因是正确的），但是控制台告诉我有关错误的信息，而不是我的错误消息：

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

您正在将字符串作为错误传递，而不是在Login组件的道具中传递对象。在呈现“登录”组件的组件中尝试“错误”的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)

用户而非用户

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

3 个答案: