React+Ant Design v4对接Django DRF登录时密码字段非空错误

嘿，我找到你问题的症结啦！你升级到Ant Design 4.x后，表单提交出现Request failed with status code 400且返回{"password":["This field may not be blank."]}，这是因为你还在沿用AntD 3.x手动维护表单state的写法，和新版本的Form组件机制冲突了。

问题根源 #

Ant Design 4.x的Form组件做了重大升级：它不再需要手动给Form.Item绑定onChange和value，而是通过name属性自动管理表单状态。你之前的代码里手动维护username和password的state，还强行给Form.Item设置value和onChange，这会干扰AntD内部的状态同步，导致最终传给API的密码为空。

解决方案 #

修改代码，遵循AntD 4.x的Form使用规范：

• 移除组件内部手动维护的state
• 删除Form.Item上的value和onChange属性
• 在onFinish方法中直接使用参数values里的表单数据调用登录接口

修改后的完整代码 #

class LoginForm extends React.Component {
  onFinish = values => {
    console.log(values);
    // 直接使用Form返回的values数据，无需从state取值
    const { username, password } = values;
    this.props.login(username, password);
  };

  render() {
    const { error, loading, token } = this.props;

    if (token) {
      return <Redirect to="/" />;
    }

    // 补充你代码中缺失的布局和回调函数定义
    const layout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    const tailLayout = {
      wrapperCol: { offset: 8, span: 16 },
    };

    const onFinishFailed = errorInfo => {
      console.log('Login failed:', errorInfo);
    };

    const callback = activeKey => {
      console.log('Switched tab:', activeKey);
    };

    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 }}>
                  <h2>Log in to your account</h2>
                  <div>
                    {error && <p>{this.props.error.message}</p>}
                    <Form
                      {...layout}
                      name="basic"
                      initialValues={{ remember: false }}
                      onFinish={this.onFinish}
                      onFinishFailed={onFinishFailed}
                    >
                      <Form.Item
                        label="Username"
                        name="username"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                      >
                        <Input />
                      </Form.Item>

                      <Form.Item
                        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>
                  </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);

为什么这样改有效？ #

• AntD 4.x Form的自动状态管理：通过给Form.Item设置name属性，Form组件会自动收集和同步输入框的数据，无需手动维护state。
• onFinish参数的正确使用：onFinish的values参数已经包含了所有表单字段的最新值，直接使用它就能确保传给API的是用户输入的正确数据。
• 移除冗余代码：删掉手动绑定的value和onChange，避免和AntD内部的状态管理冲突，让代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Nelson Kehinde