Password: "This field may not be blank." Error with React, ant design and django

Question

Hi I just started learning react and decided to use ant design (version 3), so I created an API (Django Rest Framework) and I got it up an running, my login and sign up page was working fine, so I decided to upgrade ANT Design to Version 4, I had to read the documentation because somethings changed and managed to get it looking go but now when I fill the login form to submit, I get "Request failed with status code 400"... then checked the network and i see a response: {"password":["This field may not be blank."]}

I tried to login from the API and it works perfectly, but keeps showing Request failed with 404 when i try to use the form.

this is the 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);

score 0 · Answer 1 · answered Oct 30 '20 at 19:17

At first look all is ok. You update state attributes after the change. And read state values before request. I would suggest trying to see what are you sending:

try to log:

      onFinish = values => {
        const { username, password } = this.state;
        console.log(password); // <---- try to log to console the password value     
        this.props.login(username, password);
      };

try to check login request in developer tools (do you send all values?)

Maybe it will help you, I paste below the login component (with redirect) from my tutorial (how to start saas from scratch with django and react: 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));

Password: "This field may not be blank." Error with React, ant design and django

1 Answers1