javascript - 如何使用 react js context api 正确存储和检索数据?我的代码没有按预期工作
问题描述
我正在学习反应。我试图在从 api 端点获取数据并将其存储在上下文中之后存储用户信息。问题是我必须在每个网页中执行该功能才能访问其中存储的信息。我尝试useEffect
在 App.js 中使用来获取数据并在标题和侧边栏中使用它,但它仅适用于该文件。
我有路由器,因为我的网站上有多个页面。限制数据存储在上下文中的代码是否存在任何问题,以及如何使用路由器正确执行此操作。
这些是我的代码,
减速器.js
export const initialState = {
user: null,
};
export const actionTypes = {
SET_USER: 'SET_USER',
};
const reducer = (state, action) => {
// console.log(action);
switch (action.type) {
case actionTypes.SET_USER:
return {
...state,
user: action.user,
};
default:
return state;
}
};
export default reducer;
stateprovider.js
import React, { createContext, useContext, useReducer } from 'react';
export const StateContext = createContext();
export const StateProvider = ({ reducer, initialState, children }) => (
<StateContext.Provider value={useReducer(reducer, initialState)}>
{children}
</StateContext.Provider>
);
export const useStateValue = () => useContext(StateContext);
下面是我需要useEffect
在每个页面中调用的函数,以便用户信息显示在标题和侧边栏中。
const [state, dispatch] = useStateValue()
const userInfo = async function userProfileInfo() {
axiosInstance.get('accounts/data/view/').then((res) => {
const currentUser = res.data;
dispatch({
type: actionTypes.SET_USER,
user: currentUser,
})
})
}
useEffect(() => {
userInfo()
}, [])
index.js
const routing = (
<Router>
<StateProvider initialState={initialState} reducer={reducer}>
<div className="body">
<Switch>
<Route exact path="/signup" component={Signup} />
.
.
<Route exact path="/" component={App} />
<Route exact path="/myprofile" component={PostMyProfile} />
.
</Switch>
</div>
</StateProvider>
</Router>
header.js
const [state, dispatch] = useStateValue();
console.log(state.user)
<div className="header__info">
<Avatar src= {state.user?.display_pic} alt=""/>
<h4>{state.user?.username}</h4>
</div>
是不是每个页面都要调用这个函数?我想应该有一个适当的方法来做到这一点。
解决方案
您不需要userInfo
一次又一次地调用函数。您必须在开始时调用它,那时它将保存状态中的用户信息。因此,您可以根据需要从任何组件访问状态值。使用以下代码访问您的状态
const [state, dispatch] = useStateValue();
<p>{state.user}</p>
我已更新您的代码并将其添加到代码沙箱中。请在这里查看
推荐阅读
- arrays - 无法在颤动中显示图标 onTap
- python - 如何在 Pandas DataFrame 中按单个行添加新列数据
- php - Laravel Eloquent ORM 一对多关系,从两个表中选择
- python - 无法将 YOLOv4 转换为 tflite
- reactjs - 相对于其子组件定位组件
- locust - 将 Locust 脚本更新到 1.x 时出现问题:TypeError: __init__() 需要 1 个位置参数,但给出了 2 个
- javascript - discord.js问候消息未发送
- android - Android导航组件 - 难以控制片段的生命周期(不是序列)
- asp.net-core - 在基于 Identity Server 4 的基础架构上注册新用户时的最佳实践是什么?
- telegram - 如何使用 TelegramBotClient 获取 Telegram 频道的个人资料照片