如何解决useEffect 与 useReducer
即使状态发生变化,我也无法触发重新渲染。 PageContainer
调用 loadPage
和 loadPage
更新状态没有任何问题。
但是当状态改变时,它不会触发重新渲染。
它只显示初始状态(pageName.loginPage
)。我的预期结果是 pageName.profilePage
,因为令牌已存储在浏览器中。我还检查了调试器状态明显更改为 pageName.profilePage
function PageContainer() {
const { state,loadPage } = useContainer({
reducer: loginStatusCheckReducer,});
useEffect(() => {
loadPage();
},[state]); // or [state.page]
return (
<>
{state.page}
</>
);
}
这里是 useContainer
function useContainer({ reducer }) {
const [state,dispatch] = useReducer(reducer,{ page: pageName.loginPage });
const loadPage = () => {
dispatch({ type: actionType.loadPage,dispatch });
};
return { state,loadPage };
}
这是reducer函数
function loginStatusCheckReducer(state,action) {
if (action.type === actionType.loadPage) {
const token = localStorage.getItem("token");
if (token) {
state.api = api(token);
state.page = pageName.profilePage;
return state;
}
}
return state;
}
解决方法
查看代码,我猜这不会触发重新渲染,因为您的 useEffect 传递的是一个空数组,因此它不会对任何状态更改做出反应。
尝试添加一旦加载到 useEffect 就会改变的变量/状态
function PageContainer() {
const { state,loadPage } = useContainer({
reducer: loginStatusCheckReducer,});
useEffect(() => {
loadPage();
},[state]); // here the effect will listen to state changes
console.log('state.page',state.page);
return (
<>
<h1>{state.page}</h1>
</>
);}
,
以下代码应该可以解决问题。 @lon 已经指出,不应该直接改变状态。
function loginStatusCheckReducer(state,action) {
if (action.type === actionType.loadPage) {
const token = localStorage.getItem("token");
if (token) {
//state.api = api(token);
//state.page = pageName.profilePage;
//return state;
return {
...state,api: api(token),page: pageName.profilePage,};
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。