如何在 React.js 中將狀態/數據從一個組件傳遞到另一個組件（特別是 riot api）

Question

我試圖從一個組件的 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;

我不確定是否應該創建一個單獨的 function 來代替，這將允許我創建 const 來處理單個文件中的兩個 API 調用。 或者，如果有一種方法可以將 fetch.player 中的 state 作為道具傳遞給 App.js 中的 fetch.match。 我曾嘗試做前者，但它要么不起作用，要么我弄亂了語法（很可能是這個）

Answer 1

如果您在父組件中並行渲染這兩個組件，則它們稱為兄弟組件。

兄弟組件中的數據共享可以通過多種方式（Redux、Context 等）完成，但最簡單和最簡單的方式（沒有第三方 API 的最基本方式）涉及使用 parent 作為中間組件。

首先，您在父組件中創建 state 並將其作為道具提供給需要來自其兄弟姐妹的數據的子組件（在您的情況下是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;

提供 function 到 setData 作為子組件的道具，它將獲取初始 API （在您的情況下是FetchPlayer ）

<FetchPlayer onPlayerLoad={(data) => setData(data)} />

然后，在該子組件中，當您完成調用 API 並獲得結果后，將該結果傳遞給onPlayerLoad function，它將調用 setData function，並將結果作為參數。 這將導致 state 更改和重新渲染第二個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。