如何从reactjs中的API中查找显示错误消息

Question

我是 React.JS 的新手，正在为联系人创建应用程序。从 API 中，联系人字段已得到验证，如果存在相同的姓名或电话号码，则会在 API 中显示错误消息。我的查询是如何在输入相同的姓名或电话号码时在用户界面中显示错误消息。我需要从联系人 API 获取吗？如果是的话，我可以获取联系人的 API DIdmount，但不知道如何显示错误？任何人都可以帮助我吗？

Answer 1

创建错误状态变量，并将初始值设置为“”或 null。进行 api 调用，服务器（假设您也在构建服务器）应该检查姓名和电话号码是否已存在。如果它们已经存在，服务器应该返回错误。在您的 React 应用程序中，在 API 调用后捕获错误并将其分配给您的错误状态变量。这是客户端使用钩子的示例。

export default function RegistrationForm(props) {
    const [error, setError] = useState(null)
    const errorDiv = error 
        ? <div className="error">
            <i class="material-icons error-icon">error_outline</i>
            {error}
          </div> 
        : '';

    const handleSubmit = e => {
        e.preventDefault();
        setError(null);
        
        const { full_name, user_name, password } = e.target;

        AuthApiService.postUser({
            full_name: full_name.value, 
            user_name: user_name.value, 
            password: password.value
        })
            .then(user => {
                full_name.value = '';
                user_name.value = '';
                password.value = '';
                props.onRegistrationSuccess();
            })
            .catch(res => {
                setError(res.error);
            })
    };

    return(
        <form className='RegistrationForm'
            onSubmit={handleSubmit}
        >  
            <div className='full_name'>
                <label htmlFor='RegistrationForm__full_name'>
                    Full name
                </label>
                <Input
                    name='full_name'
                    type='text'
                    required
                    id='RegistrationForm__full_name'>
                </Input>
            </div>
            <div className='user_name'>
                <label htmlFor='RegistrationForm__user_name'>
                    User name
                </label>
                <Input
                    name='user_name'
                    type='text'
                    required
                    id='RegistrationForm__user_name'>
                </Input>
            </div>
            <div className='password'>
                <label htmlFor='RegistrationForm__password'>
                    Password
                </label>
                <Input
                    name='password'
                    type='password'
                    required
                    id='RegistrationForm__password'
                    >
                </Input>
            </div>
            <div className='confirm-password'>
                <label htmlFor="LoginForm__confirm-password">
                    Retype Password
                </label>
                <Input
                    name='confirm-password'
                    type="password"
                    required
                    id="LoginForm__confirm-password">
                </Input>
            </div>
            {errorDiv}
            <Button type='submit' variant='contained' color='default'>
                Register
            </Button>
        </form>
    )
}