如何在React.js中将状态/数据从一个组件传递到另一个组件(特别是riotApi)

Question

我试图从一个组件的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;

我不确定是否应该创建一个单独的函数，这样我就可以创建const来处理单个文件中的两个API调用。或者，如果有一种方法可以将状态从fetch.player作为道具传递到App.js的fetch.match

Answer 1

如果在父组件中并行渲染两个组件，则它们被称为同级组件。

兄弟组件中的数据共享可以通过多种方式实现(Redux、Context等)，但最简单和最简单的方式(没有第三方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结果。

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。