[英]Warning: Failed propType: Invalid prop of type `array` expected `object` with React
[英]React How to fix Failed prop type - Invalid prop of type string expected object
我正在构建一个小型react
-app,用户可以在其中注册、登录等。 对于登录,我创建了一个带有额外错误验证的登录表单,来自后端。 现在,当我尝试登录并故意输入错误的凭据时,没有任何反应(出于某种原因是正确的),但控制台告诉我错误消息,而不是我的错误消息:
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);
我不知道为什么会出现这个错误!? 有人可以帮我吗?
您将字符串作为错误而不是对象传递到登录组件的道具中。 在呈现登录组件的组件中尝试“错误”的 console.log 以查看设置的值。
由于您的 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: '',
}
确保您的链接没有拼错,
export const loginUser=(userData)=>dispatch=>{
axios.post('/api/users/login',userData)
不是
export const loginUser=(userData)=>dispatch=>{
axios.post('/api/user/login',userData)
用户不是用户
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.