如何在上下文提供程序中使用 axios get 调用来做出反应

Posted

技术标签:

【中文标题】如何在上下文提供程序中使用 axios get 调用来做出反应【英文标题】:How can I use an axios get call inside a Context provider in react 【发布时间】:2021-02-26 15:54:35 【问题描述】:

我想调用以获取用户信息并在整个应用程序的不同组件中使用它,所以我使用 react.Context 并且我设法在组件之间移动一个字符串,但是当我尝试使用 axios.获取我无法将数据获取到另一个组件,这是上下文代码:

import React,  createContext  from 'react';
import axios from 'axios';

export const userContext = createContext();

export const UserProvider = (props) => 
    const config = 
        headers: 
            'Content-Type': 'application/json',
            'Authorization': `JWT $localStorage.getItem('access')`,
            'Accept': 'application/json'
        
    ;
    const res = axios.get(`$process.env.REACT_APP_API_URL/auth/users/me/`, config)
    return(
    <userContext.Provider value=  res >props.children</userContext.Provider>
    );
 

谁能告诉我我在这里做错了什么

【问题讨论】:

为什么要在上下文提供程序中进行 API 调用?您应该在组件内部进行调用并调度一个操作,该操作使用您从 API 获取的数据更新全局状态。 【参考方案1】:

如果您可以轻松处理state,那将更易于管理。而不是将res 我认为将成为你的状态,直接传递给Provider。我认为,如果您有多个state,您想及时添加到您的User 上下文中。您也需要将它们传递为value。那将不灵活。

我建议你像这样管理它们:-

    拥有专用的User 上下文文件夹:src/contexts/User
src/contexts/User/UserContext(创建 User 上下文)
import  createContext  from "react";

export const UserContext = createContext();

src/contexts/User/UserReducer(处理state更新)
export default (state, action) => 
  switch (action.type) 
    case "SET_USER":
      return 
        ...state,
        user: action.payload
      ;
    case "SET_ERROR":
      return 
        ...state,
        error: action.payload.error,
        message: action.payload.message
      ;
    case "SET_LOADING":
      return 
        ...state,
        loading: action.payload
      ;
    default:
      return state;
  
;

src/contexts/User/UserAction(处理 action 完成到 state。基本上是您需要对 state 进行更改的任何内容)
import axios from "axios";

// Set Loading
export const setLoading = (dispatch, status) =>
  dispatch( type: "SET_LOADING", payload: status );

// Set Error
export const setError = (dispatch, error) =>
  dispatch(
    type: "SET_ERROR",
    payload:  error: error.status, message: error.message 
  );

// Set User (get user info)
export const getUser = async dispatch => 
  setLoading(dispatch, true);

  // do fetch
  await axios
    .get(`https://jsonplaceholder.typicode.com/users/1`)
    .then(res => 
      const result = res.data;

      // set user info
      dispatch(
        type: "SET_USER",
        payload: result
      );
    )
    .catch(error => 
      const result = error;

      // set error if has any
      dispatch(
        type: "SET_ERROR",
        payload: 
          error: true,
          message: result
        
      );
    );
;

src/contexts/User/UserState(处理 state 初始化。您可以稍后在下面的 const initialState 中添加更多或初始化更多状态,如果有的话。另外,您以后不需要添加更多 value。)
import React,  useContext, useReducer  from "react";
import  UserContext  from "./UserContext";
import UserReducer from "./UserReducer";

export const useUser = () => 
  const  state, dispatch  = useContext(UserContext);
  return [state, dispatch];
;

export const UserState = ( children ) => 
  const initialState = 
    user: ,
    loading: false,
    error: false,
    message: ""
  ;

  const [state, dispatch] = useReducer(UserReducer, initialState);

  return (
    <UserContext.Provider
      value=
        state: state,
        dispatch: dispatch
      
    >
      children
    </UserContext.Provider>
  );
;

然后你可以像这样使用它们:-

    确保encapsulate 任何component 你想使用User 上下文(这将在App.js 中)
App.js:-
import React from "react";
import  UserState  from "./contexts/User/UserState";
import Demo from "./Demo";
import "./style.css";

export default function App() 
  return (
    <UserState>
      <Demo />
    </UserState>
  );


    您可以使用UserState 中的任何state initialized useState:-
Demo.jsApp.js子组件):-
import React,  useEffect  from "react";
import  useUser  from "./contexts/User/UserState";
import  getUser, setLoading  from "./contexts/User/UserAction";
import "./style.css";

const Demo = () =>  
  const [userState, userDispatch] = useUser();
  const  user, loading, error, message  = userState;

  // get user info handler
  const getUserInfoHandler = async () => 
    await getUser(userDispatch);
    setLoading(userDispatch, false);
  ;

  // get user info
  useEffect(() => 
    getUserInfoHandler();
  , []);

  return (
    <div>
      loading && <p>Loading...</p>
      error && <p>message</p>
      <p>User name: user.name</p>
    </div>
  );
;

export default Demo;

您可以在sandbox 中看到工作代码

【讨论】:

非常感谢您的冗长解释,但我认为我没有正确解释我的问题,我已经有一个身份验证系统,在我获得 JWT 后我使用它来获取用户信息,但是我想在另一个页面中使用此信息,这就是为什么我一直在研究上下文,我一直在寻找一段时间,并且我了解如何创建上下文和提供程序,但我不明白如何更新上下文数据在基于类的反应组件“类.....扩展React.component”中,你能告诉我如何使用它吗?谢谢 非常感谢,如何提出 PUT POST 请求,您能否修改答案以添加,非常感谢 @AshishKamble。您可以参考我在sandbox 中制作的这个示例。希望对你有帮助

以上是关于如何在上下文提供程序中使用 axios get 调用来做出反应的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ExpressJS 中使用 axios?

如何使用来自 Axios GET 的 Vue 语法渲染 HTML 字符串?

vue怎么获取到接口返回数据后再调其他方法

如何在 React 应用程序中使用 JEST 测试向 api 发出 axios 请求的异步函数

如何使用 Express 和 Axios 从我的 get 请求发送响应对象到前端?

VUE中 axios GET和POST 如何使用