使用 navigate('/path') 后重新渲染组件
Posted
技术标签:
【中文标题】使用 navigate(\'/path\') 后重新渲染组件【英文标题】:Re-render a component after using navigate('/path')使用 navigate('/path') 后重新渲染组件 【发布时间】:2021-12-11 16:52:49 【问题描述】:在这种情况下,当用户登录时,他将被重定向到消息页面。我希望在此之后呈现标题组件,但它不会发生。如果 header 被渲染,链接会改变,但如果不渲染,链接将保持不变,直到页面被刷新...... 我该怎么办?!
login.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);
;
header.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
;
【问题讨论】:
【参考方案1】:在进入解决方案之前,您需要牢记两点:
-
组件根据 State 或 Prop 更改重新渲染,就是这样。
您必须在浏览器中使用
localStorage
之类的方式保存您的登录信息,这样无论是否重新加载您的页面,您都可以知道用户是否已登录。
所以回来,您必须根据登录信息(可以是任何内容,但很可能是用户信息和/或访问/身份验证令牌)有条件地呈现链接,您将在登录后将其保存在本地浏览器存储中但是有一个问题,从localStorage
保存和取回登录数据是不够的,因为我们需要状态或道具形式的数据,因为只有这样组件才会对更改做出反应。因此,为了应对这种情况,您必须以某种方式将 localStorage
中的数据与 state/prop 同步。
要实现这一点,可以使用redux
、react-redux
和redux-persist
的组合来解决这个问题。所以基本上它的工作方式与普通 redux 流程的工作方式相同,但主要更改将通过通过redux-persist
持久化您的登录信息来完成。一旦你用redux-persist
包装你的登录reducer,它会自动将你的登录reducer 与localStorge
保持/同步。你可能会找到很多这方面的例子。因此,您将在收到带有相关数据作为其参数(将保存在存储中)的响应后发送您的登录操作,其余的将由redux
处理。之后,您只需从标题中的redux
获取您的登录状态,并根据该状态有条件地呈现您的链接。
这是一种可能的解决方案,但无论如何您都知道它是如何工作的。如果你愿意,你可以使用Context
而不是Redux
,但无论如何你明白了。
【讨论】:
以上是关于使用 navigate('/path') 后重新渲染组件的主要内容,如果未能解决你的问题,请参考以下文章
React Native this.setState() 仅在再次与组件交互后重新渲染
ole32.dll 异常后的 iWebBrowser::Navigate 死锁