сообщение об аутентификации входа в систему не отображается в пользовательском интерфейсе

Question

Таким образом, я выполняю аутентификацию с использованием номера телефона, полученного в качестве параметра в API, для получения данных от указанного c пользователя. Прямо сейчас я просто хочу обрабатывать ситуации, когда api получает число, которого нет в api. Для этого я использую материальное предупреждение пользовательского интерфейса для отображения пользователю, но я все еще получаю сообщение об ошибке (не могу прочитать свойство user of undefined), а не предупреждение в пользовательском интерфейсе, когда я ввожу неправильный номер. Вот код:

 const Login = () => {
    const history = useHistory()
    const location = useLocation()
    const [state, setState] = useState('')
    const [data, setData] = useState({});
    const phone = state
    ...
    let headers = new Headers();
    headers.set("Authorization", "Basic " + btoa(username + ":" + password));

    const handleClick = () => {
       getData();
    };

    const getData = async () => {
       const a = await fetch(url, { method: "GET", headers: headers });
       const response = await a.json();
       const respData = response.user[0].attributes[0]
       setData(respData);
       history.push(`/user/${respData.name}`)
    };

    const onTextChange = event => {
       setState(event.target.value);
    }
    

    return (
       <div>
          <input onChange={onTextChange}>
          <Button onClick={handleClick} >
             login
          </Button>
    

         {(data.user || []).map((data) => 
            (data.length == 0) ? (
              <Alert severity="error" className={styles.alert}>
                Incorrect phone number . Try again!
              </Alert>
            ) : (
              <></>
            )
         )}
      </div>
     )

Answer 1

В вышеупомянутом вопросе есть пара ошибок. Из-за первой ошибки он не должен компилироваться. Тег

• input не закрыт. <input />
• data - это объект, а не массив. вы проверяете длину объекта данных. И даже если это массив с длиной 0, вам нужно выражение if-else, а не map. Карта в вашем случае не вызывается.

{!!data.user.length && (
<Alert severity="error" className={styles.alert}>
An alert message to user!
</Alert>
)}

Last <> в этом случае не понадобится.

Answer 2

Вы должны добавить try/catch блок вокруг того места, где вы await ваш запрос, и выполнить там обработку ошибок (то есть не использовать response.user[0].attributes[0] при ответе на ошибку HTTP и избегать Невозможно прочитать свойство 'user' из undefined ошибка выполнения). Вы войдете в блок catch, если вернете код ошибки ответа в своем бэкэнде.

try {
   const a = await fetch(url, { method: "GET", headers: headers });
   const response = await a.json();
   const respData = response.user[0].attributes[0]
   setData(respData);
   history.push(`/user/${respData.name}`)
}
catch (err) {
  setShowAlert(true);
  // some more error handling if necessary
}

Я бы рекомендовал иметь логический флаг в состоянии или, если это более сложно решить, функцию для указания показывать или нет предупреждение. Это значительно упростит ваш лог c в обзоре. Что-то вроде:

const [showAlert, setShowAlert] = useState(false);
...
{showAlert && 
<Alert severity="error" className={styles.alert}>
    Incorrect phone number . Try again!
</Alert>}