Javascript 发生错误时更改状态并显示错误消息

如果用户存在，它将显示附加屏幕截图中的所有消息。 否则，用户id不存在我希望它在同一个显示中显示消息：“用户不存在”。它进入了陷阱，但随后网络崩溃

...
export default function AllMessages(){
    const [messagesState, setMessagesState] = useState([]);

    const getAllMessages = async () =>{
        let userId = document.querySelector("#userInput").value;
        try{
            const response = await axios.get("http://localhost:3001/messaging/get-all-messages/" + userId)
            setMessagesState(response.data);
        }
        catch( e ) {
            let userNotFound = {
                error: "user not found"
            }
            setMessagesState(userNotFound);
        }
    }
    ...
    return(
            ...
            <div className="message-item all-messages">
            {messagesState.error ? <h1> messagesState.error </h1>: 
                messagesState.map(message => (
                    <ul class="list-group">
                        <Message handleDelete={() => handleDelete(message.id,message.receiver)} from = {message.sender} to = {message.receiver} subject = {message.subject} content = {message.message} date = {message.creationDate}/>
                    </ul>
                ))
            }
            </div>
        </div>
    )
}

。。。
导出默认函数AllMessages（）{
const[messagesState，setMessagesState]=useState（[]）；
const getAllMessages=async（）=>{
让userId=document.querySelector（“#userInput”）.value；
试一试{
const response=等待axios.get（“http://localhost:3001/messaging/get-所有消息/“+userId）
setMessagesState（response.data）；
}
捕获（e）{
让userNotFound={
错误：“未找到用户”
}
setMessagesState（userNotFound）；
}
}
...
返回(
...
{messagesState.error？messagesState.error:
messagesState.map（message=>(

handleDelete（message.id，message.receiver）}from={message.sender}to={message.receiver}subject={message.subject}content={message.message}日期={message.creationDate}/>

))
}
)
}

if（response.data）{setMessagesState（response.data）；}else{let userNotFound={error:“未找到用户”}setMessagesState（userNotFound）；}

为什么不使用if-else？在哪里？怎样？这是一种新的语言