我正试图使用useContext将api数据从一个组件访问到另一个组件，但我没能做到

Question

我创建了一个组件，在该组件中我从rapid api请求数据。之后我在coinRanking中得到了硬币摘要，之后我试图在主页中传递数据，但我做不到。请帮助我使用useContext共享数据。

import React, { useState } from 'react'
import { useQuery } from "react-query"
import axios from 'axios'
import { createContext } from 'react';
import HomePage from '../Pages/HomePage';
const options = {
method: 'GET',
url: 'https://coinranking1.p.rapidapi.com/coins',
params: {
referenceCurrencyUuid: 'yhjMzLPhuIDl',
timePeriod: '24h',
'tiers[0]': '1',
orderBy: 'marketCap',
orderDirection: 'desc',
limit: '50',
offset: '0'
},
headers: {
'X-RapidAPI-Key': 'ea3e0e9305msh25681129077648ep1f06f9jsnb2ee8da018dc',
'X-RapidAPI-Host': 'coinranking1.p.rapidapi.com'
}
};
const DataContext = createContext({coinRanking}) // i don't know what to pass over here.
function QueryData({children}) {
const getData = axios.request(options)
const {data, isLoading, isError, error, isFetching} = useQuery("getData", ()=>getData,{})

if (isLoading){
console.log("Loading");
return <p>Loading</p>
} else if (isError){
console.log("error");
return <p>{error}</p>
}
const coinRanking= data?.data?.data.stats
return (
<div>
<DataContext.Provider value={{coinRanking}}> //i am trying to pass coinRanking in Homepage
<HomePage/>
</DataContext.Provider>
</div>
)
}
export default DataContext

Answer 1

嗯，我花了太多时间独自寻找答案，观看和探索了大量的视频和文档。最后，我得到了一个答案，但由于小错误，我认为这是不可行的。然而，我错了。我再试了一次，它起作用了。。。

import React, { useState } from 'react'
import { useQuery } from "react-query"
import axios from 'axios'
import { createContext } from 'react';
import HomePage from '../Pages/HomePage';
const options = {
method: 'GET',
url: 'https://coinranking1.p.rapidapi.com/coins',
params: {
referenceCurrencyUuid: 'yhjMzLPhuIDl',
timePeriod: '24h',
'tiers[0]': '1',
orderBy: 'marketCap',
orderDirection: 'desc',
limit: '50',
offset: '0'
},
headers: {
'X-RapidAPI-Key': 'ea3e0e9305msh25681129077648ep1f06f9jsnb2ee8da018dc',
'X-RapidAPI-Host': 'coinranking1.p.rapidapi.com'
}
};
export const DataContext = createContext() //i am trying to pass data through this context
function QueryProvider({children}) {
const getData = axios.request(options)
const {data, isLoading, isError, error, isFetching} = useQuery("getData", ()=>getData,{})

if (isLoading){
console.log("Loading");
return <p>Loading</p>
} else if (isError){
console.log("error");
return <p>{error}</p>
}
const coinRanking= data?.data?.data.stats

return (
<div>
{
Object.entries(coinRanking).map(([key, value], i)=>{
console.log("this is value");
return(
<>
<p>Hi, i am data</p>
<p key={i}>{key}--{value}</p>
</>
)
})
}
<DataContext.Provider value={{coinRanking}}>
{children}
</DataContext.Provider>
</div>
)
}
export default QueryProvider

和主页

import React from 'react'
import {DataContext} from '../DataQuery/dataQuery'
import { useContext } from 'react'
const HomePage = (props) => {
const {coinRanking} = useContext(DataContext)
console.log(coinRanking, "is in the homepage")
return (
<div>
<div>HomePage</div>
</div>
)
}
export default HomePage

最重要的是在app.js文件中，您必须使用路由器的上下文提供程序

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { QueryClientProvider, QueryClient } from "react-query"
import './App.css'
import HomePage from './components/Pages/HomePage'
import QueryProvider,{DataContext} from './components/DataQuery/dataQuery'
import { ReactQueryDevtools } from 'react-query/devtools'
const queryClient = new QueryClient()
function App() {
return (
<div>
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<QueryProvider>
<Routes>
<Route path="/" element={<HomePage/>}></Route>
</Routes>
</QueryProvider>
</BrowserRouter>
{/* <ReactQueryDevtools initialIsOpen={false} position="bottom-right"/> */}
</QueryClientProvider>
</div>
)
}
export default App