如何显示脉轮 UI '警报'？

Question

我正在尝试使用 Chakra Ui 显示警报消息，但它没有显示。 请帮忙。

.catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            console.log(errorMessage, errorCode);
            <Alert status='error'>
                <AlertIcon />
                <AlertTitle>Error!</AlertTitle>
                <AlertDescription>Email/ Password Did Not Matched.</AlertDescription>
            </Alert>
        });

Answer 1

<Alert />之类的组件不能添加到 Promise 的捕获中。 您必须有条件地在组件的 return 语句中呈现警报，如下所示：

 function LoginExample() { const [showAlert, setShowAlert] = useState(false) const handleLogin = (email, password) => { loginUser(email, password) .then((res) => /* handle success */) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; console.log(errorMessage, errorCode); setShowAlert(true) }) } return ( <> {showAlert && ( <Alert status='error'> <AlertIcon /> <AlertTitle>Error!</AlertTitle> <AlertDescription>Email/ Password Did Not Matched.</AlertDescription> </Alert> )} {/* rest of jsx */} </> ) }