如何将 API 数据传递给子组件

Question

I am trying to create a very simple website called Currency Tracker. I am using the following API: http://api.nbp.pl/ . I have managed to get the 'mid' and 'code' data with fetch method which I need to render the child components with. I'm still learning to use API. Unfortunatelly I'm stuck. I don't know how to use this data and how pass it down to render the components.

import MainPageItem from './MainPageItem.js'
import './MainPage.css';

fetch('http://api.nbp.pl/api/exchangerates/tables/A')
  .then(response => {
    return response.json();
  })
  .then(data => {
    const mid = data[0].rates.map(currency => {
      return currency.mid
    });
    console.log(mid)
  })

fetch('http://api.nbp.pl/api/exchangerates/tables/A')
  .then(response => {
    return response.json();
  })
  .then(data => {
    const code = data[0].rates.map(currency => {
      return currency.code
    });
    console.log(code)
  })
  
function MainPage(props) {
  return (
    <div className="main-page">
      <div className="main-page__currecy-list-container">
        <div className="main-page__currency-list">
          <MainPageItem currency="EUR" mid="4.5" />
          <MainPageItem currency="USD" mid="4" />
          <MainPageItem currency="GBP" mid="5" />
          <MainPageItem currency="CHF" mid="3.5" />
        </div>
      </div>
    </div>
  );
}```

The MainPageItem is just a mockup. How can I pas the 'mid' and 'code' data to props render components?. Ideally I want to 

Answer 1

You have to put the api calls inside your MainPage component, store the results inside some state (eg using useState ) and then passing the data wherever you need, or just using it inside the component itself.

import MainPageItem from './MainPageItem.js'
import { useState, useEffect } from 'react'
import './MainPage.css';
  
function MainPage(props) {
  const [codes, setCodes] = useState([])
  const [mids, setMids] = useState([])

  useEffect(() => {
    fetch('http://api.nbp.pl/api/exchangerates/tables/A')
      .then(response => {
        return response.json();
      })
     .then(data => {
       const code = data[0].rates.map(currency => {
         return currency.code
       });
       setCodes(code)
     })
    fetch('http://api.nbp.pl/api/exchangerates/tables/A')
      .then(response => {
        return response.json();
      })
      .then(data => {
        const mid = data[0].rates.map(currency => {
          return currency.mid
        });
       setMids(mid)
      })
  }, [])
  return (
    <div className="main-page">
      <div className="main-page__currecy-list-container">
        <div className="main-page__currency-list">
         {codes.map((code, i) => <MainPageItem key={i} currency={code} mid={mids[i]} />)}
        </div>
      </div>
    </div>
  );
}

This is an example of what you can do in order to save the codes inside a piece of state of your component.

The mids part is very naive and I added it only to give you a hint on how to do that.

Answer 2

使用道具可以将数据传递给其他组件。