如何在 React.js 中将 state/data 从一个组件传递到另一个组件（特别是 riot api）

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 调用以获取将在第二个 API 调用中使用的用户特定 ID，同时获取用户匹配历史记录。

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 作为 prop 从 App.js 传递到 fetch.match。我试过前者，但它要么不起作用，要么我弄乱了语法（很可能是这样）

Answer 1

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

兄弟组件中的数据共享可以通过多种方式（Redux、Context 等）完成，但最简单最简单的方式（没有第 3 方的最基本方式API) 涉及使用parent作为中间组件。

首先，您在父组件中创建状态并将其作为 props 提供给需要来自其兄弟组件的数据的子组件（在您的情况下是 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。

如何在 React.js 中将 state/data 从一个组件传递到另一个组件（特别是 riot api）

How to pass state/data from one component to another in React.js (riot api specifically)

javascript

reactjs

riot-games-api

react-props

react-component