如何使用 react js context api 正确存储和检索数据？我的代码没有按预期工作

Question

我正在学习反应。从 api 端点获取数据并将其存储在上下文中后，我试图存储用户信息。问题是我必须在每个网页中执行该功能才能访问其中存储的信息。我尝试在 App.js 中使用 useEffect 来获取数据并在页眉和侧边栏中使用它，但它仅在该文件中有效。

我有路由器，因为我的网站有多个页面。限制数据存储在上下文中的代码是否存在任何问题，以及如何使用路由器正确执行此操作。

这些是我的代码，

reducer.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>

是不是每个页面都要调用这个函数？我想应该有一个正确的方法来做到这一点。

Answer 1

您不需要一次又一次地调用 userInfo 函数。你必须在开始时调用它，那时它会保存状态中的用户信息。因此，您可以根据需要从任何组件访问状态值。使用以下代码访问您的状态

const [state, dispatch] = useStateValue();

<p>{state.user}</p>

我已经更新了您的代码并将其添加到 codesandbox 中。请检查 here

如何使用 react js context api 正确存储和检索数据？我的代码没有按预期工作

How to properly store and retrieve data using react js context api? The code, I have is not working as expected

javascript

jsx

reactjs

react-native

react-context