Javascript 如何在React.js中将状态/数据从一个组件传递到另一个组件（特别是riot api）_Javascript_Reactjs_React Props_React Component_Riot Games Api

Javascript 如何在React.js中将状态/数据从一个组件传递到另一个组件（特别是riot api）

javascript reactjs

Javascript 如何在React.js中将状态/数据从一个组件传递到另一个组件（特别是riot api）,javascript,reactjs,react-props,react-component,riot-games-api,Javascript,Reactjs,React Props,React Component,Riot Games Api,我试图从一个组件的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 ( <d

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

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;

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;

import'/App.css'；
从“./fetch match/fetch.match”导入FetchMatch；
从“./fetch player/fetch.player”导入FetchPlayer；
函数App（）{
返回(
你好，世界
);
}
导出默认应用程序；

然后，fetch.player进行第一个API调用以获取用户特定的ID，该ID将在第二个API调用中使用，以获取用户匹配的历史记录

fetch.player.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;

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;

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;

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
常量FetchPlayer=（）=>{
常量[playerData，setPlayerData]=useState（[]）；
const userName='users name'；
const userTagLine='1234'；
常数apiKey='？？？'；
useffect（（）=>{
axios.get(`https://americas.api.riotgames.com/riot/account/v1/accounts/by-riot-id/${userName}/${userTagLine}？api_key=${apiKey}`）
。然后（响应=>{
console.log（response.data）
setPlayerData（[response.data]）
})
.catch（错误=>console.log（错误））
}, []);
返回(
{playerData.map（数据=>(
{data.puuid}
{data.gameName}{data.tagLine}
))}
)
}
导出默认的抓取播放器；

这里不多，只是以防万一

fetch.match.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;

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;

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;

import React，{useState}来自“React”；
//以某种方式接收fetch.player状态下的puuid集，以进行下面的第二个API调用
常量FetchMatch=（）=>{
常量[matchData，setMatchData]=useState（[]）；
返回(
//球员名单在这里
)
}
导出默认抓取匹配；

我不确定是否应该创建一个单独的函数，它允许我在一个文件中创建常量来处理两个API调用。或者，如果有方法将fetch.player中的状态作为道具传递给App.js中的fetch.match。我尝试过使用前一种方法，但要么不起作用，要么我弄乱了语法（很可能是这样）

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

同级组件中的数据共享可以通过多种方式（Redux、Context等）完成，但最简单的方式（没有第三方API的最基本方式）是将父组件用作中间组件
首先，在父组件中创建状态，并将其作为道具提供给需要来自其同级的数据的子组件（在本例中为FetchMatch）
来到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;

import React，{useState}来自“React”；
//以某种方式接收fetch.player状态下的puuid集，以进行下面的第二个API调用
常量FetchMatch=（{data}）=>{
常量[matchData，setMatchData]=useState（[]）；
//控制台日志（数据）；
返回(
//球员名单在这里
)
}
导出默认抓取匹配；

现在，您可以对第二个组件中的共享数据执行任何操作，在您的示例中，该组件是触发器匹配API 如果在父组件中并行渲染这两个组件，则它们称为同级组件

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;

import React，{useState}来自“React”；
//以某种方式接收fetch.player状态下的puuid集，以进行下面的第二个API调用
常量FetchMatch=（{data}）=>{
常量[matchData，setMatchData]=useState（[]）；
//控制台日志（数据）；
返回(
//球员名单在这里
)
}
导出默认抓取匹配；

现在，您可以对第二个组件中的共享数据执行任何操作，在您的示例中，该组件是触发器匹配API。我有一种感觉，那就是必须通过父母深入到孩子身上。非常感谢您的帮助，使它能够快速轻松地工作！。不客气。很乐意帮忙！我有一种感觉，那就是必须通过父母深入到孩子身上。非常感谢您的帮助，使它能够快速轻松地工作！。不客气。很乐意帮忙！