问题描述
我试图从一个组件的 API 调用中提取信息,然后在单独组件的另一个 API 调用中使用该数据。但是,我不确定如何导出和使用第二个组件中第一个 API 调用中的数据。
App.js
import './App.css';
import FetchMatch from './fetch-match/fetch.match';
import FetchPlayer from './fetch-player/fetch.player';
function App() {
return (
<div className="App">
<h1>Hello world</h1>
<FetchPlayer></FetchPlayer>
<FetchMatch></FetchMatch>
</div>
);
}
export default App;
fetch.player 然后进行第一个 API 调用以获取用户特定 ID,该 ID 将在第二个 API 调用中使用,也获取用户匹配历史记录。
fetch.player.js
import React,{ useEffect,useState } from 'react';
import axios from 'axios';
const FetchPlayer = () => {
const [playerData,setPlayerData] = useState([]);
const userName = 'users name';
const userTagLine = '1234';
const apiKey = '???';
useEffect( () => {
axios.get(`https://americas.api.riotgames.com/riot/account/v1/accounts/by-riot-id/${userName}/${userTagLine}?api_key=${apiKey}`)
.then(response => {
console.log(response.data)
setPlayerData([response.data])
})
.catch(error => console.log(error))
},[]);
return (
<div>
{playerData.map( data => (
<div>
<p>{data.puuid}</p>
<p>{data.gameName}#{data.tagLine}</p>
</div>
))}
</div>
)
}
export default FetchPlayer;
这里不多,但以防万一......
fetch.match.js
import React,{ useState } from 'react';
// Somehow take in the puuid set in the state of fetch.player to make a second API call below
const FetchMatch = () => {
const [matchData,setMatchData] = useState([]);
return (
<div>
// players match list goes here
</div>
)
}
export default FetchMatch;
我不确定是否应该创建一个单独的函数,这将允许我创建常量来处理单个文件中的两个 API 调用。或者,如果有一种方法可以将 fetch.player 中的状态作为道具传递给 App.js 中的 fetch.match。我试图做前者,但它要么不起作用,要么我弄乱了语法(很可能是这个)
解决方法
如果在父组件中并行渲染两个组件,则它们称为兄弟组件。
兄弟组件中的数据共享可以通过多种方式(Redux、Context 等)完成,但最简单和最简单的方式(没有 3rd 方 API 的最基本方式)涉及使用父组件作为中间组件。
首先,您在父组件中创建状态,并将其作为道具提供给需要来自其兄弟组件的数据的子组件(在您的情况下是 FetchMatch)。
import React from 'react';
import './App.css';
import FetchMatch from './fetch-match/fetch.match';
import FetchPlayer from './fetch-player/fetch.player';
function App() {
const [data,setData] = React.useState();
return (
<div className="App">
<h1>Hello world</h1>
<FetchPlayer></FetchPlayer>
<FetchMatch data={data} ></FetchMatch>
</div>
);
}
export default App;
提供 setData 函数作为子组件的道具,该子组件将获取初始 API(在您的情况下为 FetchPlayer)
<FetchPlayer onPlayerLoad={(data) => setData(data)} />
然后,在该子组件中,当您完成调用 API 并获得结果时,将该结果传递给 onPlayerLoad
函数,该函数将使用结果作为参数调用 setData 函数。这将导致第二个 FetchMatch
组件的状态更改和重新渲染,将 API 结果提供给 props 数据。
import React,{ useEffect,useState } from 'react';
import axios from 'axios';
const FetchPlayer = ({onPlayerLoad}) => {
const [playerData,setPlayerData] = useState([]);
const userName = 'users name';
const userTagLine = '1234';
const apiKey = '???';
useEffect( () => {
axios.get(`https://americas.api.riotgames.com/riot/account/v1/accounts/by-riot-id/${userName}/${userTagLine}?api_key=${apiKey}`)
.then(response => {
console.log(response.data)
setPlayerData([response.data])
onPlayerLoad(response.data)
})
.catch(error => console.log(error))
},[]);
return <></>;
来到FetchMatch,您将获得第二次呈现的数据。
import React,{ useState } from 'react';
// Somehow take in the puuid set in the state of fetch.player to make a second API call below
const FetchMatch = ({data}) => {
const [matchData,setMatchData] = useState([]);
//console.log(data);
return (
<div>
// players match list goes here
</div>
)
}
export default FetchMatch;
现在,您可以对第二个组件中的共享数据做任何您想做的事情,在您的情况下是触发器匹配 API。 ?