在這種情況下，當用戶登錄時，他將被重定向到訊息頁面。我希望在此之后呈現標題組件，但它沒有發生。如果頭部渲染了，鏈接會改變，但如果不渲染，鏈接將保持不變，直到頁面重繪 ......我該怎么辦？！
登錄.js：
const login = async (e) => {
e.preventDefault();
const result = await (
await fetch("/portfolio/login", {
method: "POST",
credentials: "include",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
})
).json();
if (result.accessToken) {
navigate("/message"); //imported from @reach/router
} else console.log(result.error);
if (result.message) setRes(result.message);
};
頭檔案.js：
const Header = () => {
const [tokenObj, setToken] = useState('');
useEffect(() => {
fetch('/portfolio/verify', {method : "GET"})
.then((res)=>{
if(res.ok) return res.json(res);
})
.then((jsonRes)=> {
if(jsonRes.token) setToken(jsonRes.token)
});
}, [tokenObj]);
let lastNavLink;
let lastNavHref;
if(tokenObj){
lastNavLink = 'Messages';
lastNavHref = '/message'
} else {
lastNavLink = 'Login';
lastNavHref = '/login';
}
return <a href={lastNavHref}> {lastNavLink} </a> //dynamic link
};
uj5u.com熱心網友回復：
在進入解決方案之前，您需要記住兩件事：
- 組件根據 State 或 Prop 變化重新渲染，就是這樣。
- 你必須在瀏覽器中保存你的登錄資訊，
localStorage這樣你就知道用戶是否登錄，無論重新加載你的頁面。
因此，回來后，您必須根據登錄資訊（它可以是任何內容，但很可能是用戶資訊和/或訪問/身份驗證令牌）有條件地呈現鏈接，您將在登錄后將其保存在本地瀏覽器存盤中。但是有一個問題，保存和取回登錄資料是localStorage不夠的，因為我們需要 state 或 prop 形式的資料，因為只有這樣組件才會對更改做出反應。因此，為了解決這個問題，您必須以某種方式將資料localStorage與 state/prop同步。
為了實作這一個可以使用的組合redux，react-redux并redux-persist以解決這一問題。所以基本上它的作業方式與正常的 redux 流程相同，但主要的變化將通過將您的登錄資訊持久化到redux-persist. 一旦您使用 包裝您的登錄減速器redux-persist，它將自動使用 保持/同步您的登錄減速器localStorge。你可能會找到很多這方面的例子。因此，您將在接收到相關資料作為其引數（將保存在商店中）的回應后發送您的登錄操作，其余的將由redux. 之后，您只需從redux標題中獲取登錄狀態，并根據該狀態有條件地呈現您的鏈接。
這是一種可能的解決方案，但無論如何您都會了解它是如何作業的。如果您愿意，您可以使用Context代替，Redux但無論如何您都會明白。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/337025.html
標籤：javascript 反应 反应钩子 成分 渲染
上一篇：反應時間前沒有得到日期