如何在上下文提供程序中使用 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.js
(App.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 调用来做出反应的主要内容,如果未能解决你的问题,请参考以下文章
如何使用来自 Axios GET 的 Vue 语法渲染 HTML 字符串?
如何在 React 应用程序中使用 JEST 测试向 api 发出 axios 请求的异步函数