我想根據條件渲染一些 JSX，但它沒有發生。下面是我的代碼 -
chkAccess().then((result) => {
console.log(result)
if(result) {
alert("Access Granted")
return (
<div className='login_container p-5 m-5 bg-dark'>
<h1 className='text-center p-3'>You are seeing this page because you are a Manager</h1>
</div>
)
}
alert("Access Denied")
return(<Access_denied />)
回傳的 JSX 沒有被渲染。為什么會這樣，我該如何解決？
我希望回傳的代碼被渲染，但它沒有發生。
uj5u.com熱心網友回復：
從我可以看到你的實作是錯誤的。如果您需要首先檢查用戶的訪問權限，您應該顯示加載，并在檢查權限后根據用戶擁有的權限設定狀態，然后根據該狀態呈現 JSX。如果您不希望用戶看到加載微調器，您可以使用服務器端并在渲染您檢查的組件之前
const [hasAccess, setHasAccess] = useState(null);
useEffect(() => {
chkAccess().then((result) => {
setHasAccess(!!result);
});
}, []);
if (hasAccess === null) return <Loading />;
if (!hasAccess) {
alert("Access Denied");
return <Access_denied />;
}
if (hasAccess)
return (
<div className="login_container p-5 m-5 bg-dark">
<h1 className="text-center p-3">
You are seeing this page because you are a Manager
</h1>
</div>
);
uj5u.com熱心網友回復：
您應該使用狀態來跟蹤異步呼叫結果，然后根據當前狀態呈現不同的元素。
這是一個基于實作的示例：
import { useEffect, useState } from "react";
export default function App() {
const [hasAccess, setHasAccess] = useState(false);
const [loading, setLoading] = useState(false);
// Here we mock access check.
const chkAccess = async () => Promise.resolve(() => true);
useEffect(() => {
setLoading(true);
const timer = setTimeout(() => {
setHasAccess(chkAccess());
setLoading(false);
}, 1000);
return () => clearTimeout(timer);
}, []);
const renderContent = () => {
if (loading) {
return "Loading...";
}
if (!hasAccess) {
return "Access Denied";
}
return "Authenticated";
};
return <div className="App">{renderContent()}</div>;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/533024.html