如何在React+Antd注册表单中展示后端返回的自定义错误

使用React + Ant Design实现注册功能，当后端返回如下格式的“用户已注册”错误时，需要点击Sign Up按钮后在表单的用户名输入框下方展示该错误提示。

后端错误返回示例：

{
    "errorCode": "1",
    "errorMessage": "user already registered"
}

现有注册页面代码：

class RegisterPage extends React.Component {

    // Method in which I send the request
    signUp(values) {
        fetch("http://localhost:8080/sign-up", {
            method: "POST",
            body: JSON.stringify({"username": values.username, "password": values.password})
        }).then(response => response.json())
            .then(response => {console.log(response)
            })
    }

    render() {
        return (
            <>
                <Header/>
                <div className="container">
                </div>
                <Row type="flex" justify="center" align="middle" style={{minHeight: '80vh'}}>
                    <Form

                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={this.signUp}
                    >
                        <Form.Item className="username-input"
                                   name="username"
                                   rules={[
                                       {
                                           required: true,
                                           message: 'This user already registered!',
                                       }
                                   ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="Username"/>
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                    min: 1,
                                },
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon"/>}
                                type="password"
                                placeholder="Password"
                            />
                        </Form.Item>
                        <Form.Item
                            name="confirm_password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please confirm your password!',
                                },
                                ({getFieldValue}) => ({
                                    validator(_, value) {
                                        if (!value || getFieldValue('password') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('Passwords don\'t match!'));
                                    },
                                }),
                            ]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon"/>}
                                type="password"
                                placeholder="Confirm password"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button"
                                    style={{width: "100%"}}>
                                Sign Up
                            </Button>
                        </Form.Item>
                    </Form>
                </Row>
                <PageFooter/>
            </>
        )
    }
}

核心是利用Ant Design Form组件的setFields方法手动设置字段错误状态，具体实现步骤如下：

1. 给Form组件添加Ref引用 #

要调用Form的内置方法，首先需要获取Form实例，在类组件中通过createRef实现：

class RegisterPage extends React.Component {
    // 创建Form的ref引用
    formRef = React.createRef();

    // ... 其他代码
}

然后在render的Form组件上绑定该ref：

<Form
    ref={this.formRef}
    name="normal_login"
    className="login-form"
    initialValues={{
        remember: true,
    }}
    onFinish={this.signUp}
>

2. 修改signUp方法处理后端错误 #

在请求回调中判断后端返回的错误信息，触发setFields给username字段设置错误提示：

signUp(values) {
    fetch("http://localhost:8080/sign-up", {
        method: "POST",
        headers: { // 添加Content-Type头，确保后端正确解析JSON
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({"username": values.username, "password": values.password})
    })
    .then(response => response.json())
    .then(response => {
        // 判断是否为用户已注册的错误
        if (response.errorCode === "1" && response.errorMessage === "user already registered") {
            // 给username字段设置错误提示
            this.formRef.current.setFields([
                {
                    name: 'username',
                    errors: [response.errorMessage],
                }
            ]);
        } else {
            // 处理注册成功逻辑，比如跳转登录页
            console.log("注册成功", response);
        }
    })
    .catch(error => {
        // 处理网络请求失败情况
        console.error("请求失败", error);
    });
}

3. 调整用户名字段校验规则（可选） #

原代码中用户名的必填提示与后端错误提示重复，建议修改为合理的必填提示：

<Form.Item className="username-input"
           name="username"
           rules={[
               {
                   required: true,
                   message: '请输入用户名!', // 修改为必填提示
               }
           ]}
>

内容的提问来源于stack exchange，提问作者Golov Peter