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

Question

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

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

Answer 2

具有API来检查名称是否可用，并在用户更改输入内容时点击API。

import React, { useState } from "react";
import ReactDOM from "react-dom";

let delayTimer;

function App() {
  const [name, setName] = useState("");
  const [nameAvailable, setNameAvailable] = useState(null);

  async function checkNameAvailable() {
    try {
      const response = await APIUtility.isNameAvailable(name);

      const { data = null } = response;
      if (data) {
        setNameAvailable(data); // data may be true or false
      }
    } catch (error) {
      setNameAvailable(null);
    }
  }

  function handleNameChange(e) {
    setName(e.target.value);
    if (name.length > 0) {
      if (delayTimer) clearTimeout(delayTimer);
      delayTimer = setTimeout(function() {
        checkNameAvailable();
      }, 1000); // Will do the ajax stuff after 1000 ms, or 1 s
    }
  }

  return (
    <form>
      <label htmlFor="invite_code">Enter your name:</label>
      <input
        value={name}
        onChange={handleNameChange}
        type="text"
        name="inviteCode"
        id="invite_code"
        autoComplete="off"
      />
      {nameAvailable && <span>Name already taken</span>}
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);