我试图从一个组件的 API 调用中提取信息,然后在单独组件的另一个 API 调用中使用该数据。但是,我不确定如何在第二个组件中导出和使用来自第一个 API 调用的数据。
应用程序.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;
我不确定我是否应该创建一个单独的函数来允许我创建 const 来处理单个文件中的两个 API 调用。或者,如果有一种方法可以将 fetch.player 中的状态作为道具传递给 App.js 中的 fetch.match。我曾尝试做前者,但它要么不起作用,要么我弄乱了语法(很可能是这个)