问题描述
嗨，我刚刚开始学习React，并决定使用ant design（版本3），所以我创建了一个API（Django Rest Framework），并使其运行，我的登录和注册页面运行正常，所以我决定将ANT Design升级到版本4，我必须阅读文档，因为某些内容有所更改并设法使其正常运行，但是现在当我填写要提交的登录表单时，我收到“请求失败，状态码为400” ...然后检查网络，然后看到响应：{“ password”：[“此字段不能为空。”]}
我尝试从API登录，但效果很好，但是当我尝试使用表单时，显示404请求失败。
这是Form.Js
class LoginForm extends React.Component {
state = {
username: "",password: ""
};
handleChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
onFinish = values => {
console.log(values);
// values.preventDefault();
const { username,password } = this.state;
this.props.login(username,password);
};
render() {
const { error,loading,token } = this.props;
const { username,password } = this.state;
if (token) {
return <Redirect to="/" />;
}
return (
<Layout>
<Layout>
<Layout style={{ padding: '0 24px 24px',background: '#fff' }}>
<Tabs defaultActiveKey="1" onChange={callback}>
<TabPane tab="Login" key="1">
<Content
style={{
background: '#fff',padding: 24,margin: 0,minHeight: 280,}}
>
{/* {this.props.children} */}
<h2>Log in to your account</h2>
<div>
{error && <p>{this.props.error.message}</p>}
<React.Fragment>
<Form
{...layout}
name="basic"
initialValues={{ remember: false }}
onFinish={this.onFinish}
onFinishFailed={onFinishFailed}
// onSubmit={this.handleSubmit}
>
<Form.Item
onChange={this.handleChange}
value={username}
label="Username"
name="username"
rules={[{ required: true,message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<Form.Item
onChange={this.handleChange}
value={password}
label="Password"
name="password"
rules={[{ required: true,message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item {...tailLayout} name="remember" valuePropName="checked">
<CheckBox>Remember me</CheckBox>
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary"
loading={loading}
disabled={loading}
htmlType="submit">
Log in
</Button>
</Form.Item>
</Form>
</React.Fragment>
</div>
</Content>
</TabPane>
<TabPane tab="Sign Up" key="2">
Content of Tab Pane 2
</TabPane>
</Tabs>
</Layout>
</Layout>
</Layout>
);
}
}
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
)(LoginForm);
解决方法
乍一看一切都还好。更改后，您将更新状态属性。并在请求之前读取状态值。我建议尝试查看您要发送的内容：
- 尝试登录：
onFinish = values => {
const { username,password } = this.state;
console.log(password); // <---- try to log to console the password value
this.props.login(username,password);
};
- 尝试在开发人员工具中检查登录请求（您是否发送所有值？）
也许会对您有所帮助，我将本教程中的登录组件（带有重定向）粘贴到下面（如何使用django从头开始saas并做出反应：link to tutorial）
import React,{ Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { withRouter,Redirect } from "react-router-dom";
import { Link } from "react-router-dom";
import { Button,Form,FormGroup,Input,Label } from "reactstrap";
import Container from "react-bootstrap/Container";
import { login } from "./LoginActions";
class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: "piotr1234",password: "verysecret"
};
this.defaultRedirect = "/dashboard";
this.redirectTo = this.props.location
? this.extractRedirect(this.props.location.search) || this.defaultRedirect
: this.defaultRedirect;
}
onChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
extractRedirect = string => {
const match = string.match(/next=(.*)/);
return match ? match[1] : this.defaultRedirect;
};
onLoginClick = () => {
const user = {
username: this.state.username,password: this.state.password
};
this.props.login(user,this.redirectTo);
};
render() {
const { isAuthenticated } = this.props.auth;
if (isAuthenticated) {
return <Redirect to="/dashboard"></Redirect>;
}
return (
<Container>
<h1>Login</h1>
<Form>
<FormGroup>
<Label for="usernameId">Your Email</Label>
<Input
value={this.state.username}
onChange={this.onChange}
type="text"
name="username"
id="usernameId"
placeholder="User name"
/>
</FormGroup>
<FormGroup>
<Label for="passwordId">Your Password</Label>
<Input
value={this.state.password}
onChange={this.onChange}
type="password"
name="password"
id="passwordId"
placeholder="Password"
/>
</FormGroup>
</Form>
<Button color="primary" onClick={this.onLoginClick}>
Login
</Button>
<div style={{ paddingTop: "10px" }}>
Don't have account? <Link to="/signup">Sign up</Link>
</div>
</Container>
);
}
}
Login.propTypes = {
login: PropTypes.func.isRequired,auth: PropTypes.object.isRequired,location: PropTypes.shape({
search: PropTypes.string.isRequired
})
};
const mapStateToProps = state => ({
auth: state.auth
});
export default connect(mapStateToProps,{
login
})(withRouter(Login));