因此,我使用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>
)