如何以antd的形式输出自己的错误？

Question

我使用 React 和 Antd 进行注册。当后端发送错误“用户已注册”时，点击“注册”后需要将其显示在表单中。

像这里或其他东西，但我输入用户名和两个密码：

来自服务器的响应，但我可以采用不同的方式：

{
    "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/>
            </>
        )
    }
}

Answer 1

您只需修改表单中字段的消息值即可。

<Form.Item className="username-input"
         name="username"
         rules={[
          {
          required: true,
          // you can give custorm error message in the below message field.
          message: 'user already registered',
          }
          ]}
          >
         <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="Username"/>
          </Form.Item>