Question

我正在尝试创建一个名为 Currency Tracker 的非常简单的网站。我正在使用以下 API：http://api.nbp.pl/。我已经设法使用我需要用来呈现子组件的 fetch 方法获取“mid”和“code”数据。我仍在学习使用 API。不幸的是，我被卡住了。我不知道如何使用这些数据以及如何将其传递给组件。

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

您必须将 api 调用放在您的 MainPage 组件中，将结果存储在某个状态中（例如使用 useState），然后将数据传递到您需要的任何地方，或者仅在组件内部使用它自己。

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>
  );
}

这是为了将 codes 保存在组件的一部分状态中可以执行的操作的示例。

mids 部分非常幼稚，我添加它只是为了提示您如何操作。

Answer 2

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

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

2 个答案: