React开发中如何将API请求获取的汇率数据传递给子组件渲染

实现方案 #

你原有代码存在3个可优化的点：

• 重复请求两次相同接口，浪费资源，实际只需要请求一次就能同时拿到所有币种的code和mid字段
• 请求写在组件外部，获取到的数据无法直接传入组件使用
• 没有用状态管理接口返回的数据，无法驱动视图更新

以下是修改后的完整可运行代码：

import { useState, useEffect } from 'react'
import MainPageItem from './MainPageItem.js'
import './MainPage.css';
  
function MainPage(props) {
  // 定义state存储汇率列表，初始值为空数组
  const [currencyList, setCurrencyList] = useState([])

  useEffect(() => {
    // 组件挂载时只发起一次请求
    fetch('http://api.nbp.pl/api/exchangerates/tables/A')
      .then(response => response.json())
      .then(data => {
        // 直接取接口返回的rates数组，每个元素自带code和mid字段
        const rates = data[0].rates
        setCurrencyList(rates)
      })
  }, []) // 空依赖数组确保只执行一次

  return (
    <div className="main-page">
      <div className="main-page__currecy-list-container">
        <div className="main-page__currency-list">
          {/* 遍历汇率数组，动态渲染子组件 */}
          {currencyList.map(item => (
            <MainPageItem 
              key={item.code} 
              currency={item.code} 
              mid={item.mid} 
            />
          ))}
        </div>
      </div>
    </div>
  );
}

export default MainPage

补充说明：

• 给遍历生成的子组件加key属性是React要求的规范，用来优化列表渲染性能，这里用唯一的币种code作为key即可
• 如果需要加加载状态，可以额外加一个isLoading的state，请求发起时设为true，请求完成后设为false，根据状态渲染加载提示
• 建议补充请求失败的catch逻辑，避免接口报错导致页面崩溃

内容的提问来源于stack exchange，提问作者WorstProgrammerEver