reactjs - 如何在reactjs中找到来自API的显示错误消息

Question

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

Answer 1

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

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>
    )
}