登录验证警报消息未在ui中呈现

由 发布于 javascriptreactjs
 收藏

因此，我使用api中接收的电话号码作为参数进行身份验证，以从特定用户中检索数据。现在，我只想处理api收到api中没有的数字时的情况。为此，即时消息使用实质性ui警报显示给用户，但是当我输入错误的数字时，即时消息仍然收到错误（无法读取未定义的'user'属性），并且未在UI中发出警报。这是代码：

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