密码：“此字段不能为空。” React、ant design 和 django 出错

Question

您好，我刚开始学习 react 并决定使用 ant design（第 3 版），所以我创建了一个 API（Django Rest 框架）并运行它，我的登录和注册页面运行良好，所以我决定将 ANT Design 升级到版本 4，我不得不阅读文档，因为发生了一些变化并设法让它看起来正常，但是现在当我填写登录表单提交时，我得到“请求失败，状态码 400”......然后检查网络，我看到一个响应：{“密码”：[“此字段可能不是空白。”]}

我尝试从 API 登录，它运行良好，但在我尝试使用表单时一直显示 Request failed with 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); 

Answer 1

乍一看一切正常。您在更改后更新状态属性。并在请求之前读取状态值。我建议尝试查看您发送的内容：

• 尝试登录：

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