React JS中如何将Fetch获取值作为Props传递？页面空白求助

两种写法的错误分析 #

第一种写法的问题

你的第一个写法里，App组件没有返回任何JSX内容。fetch是异步操作，你在then回调里返回的JSX只是回调函数的返回值，不是组件函数的返回值。组件函数执行完后默认返回undefined，页面自然空白。另外代码里用到的<Informacoes />组件也未导入，属于语法错误。

第二种写法的问题

第二个写法里，你把fetch直接写在了组件函数体内，这会导致组件每次渲染都会触发一次fetch请求。当请求完成调用setRealDolar更新状态时，又会触发组件重新渲染，进而再次执行fetch，形成无限循环。浏览器可能会因为频繁请求限制接口调用，或者组件一直处于渲染循环中，导致页面显示异常。

正确实现方案 #

使用useEffect钩子控制异步请求的执行时机，同时添加加载状态和错误处理，避免页面空白：

import './App.css';
import React, { useState, useEffect } from 'react';
import RealDolar from './components/real_dolar.js';

function App() {
  const [realDolar, setRealDolar] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchExchangeRate = async () => {
      try {
        const url = 'https://api.freecurrencyapi.com/v1/latest?base_currency=USD&currencies=BRL&apikey=你的API密钥';
        const res = await fetch(url);
        if (!res.ok) {
          throw new Error(`请求失败: ${res.status}`);
        }
        const json = await res.json();
        setRealDolar(json.data.BRL);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchExchangeRate();
  }, []); // 空依赖数组，确保请求仅在组件挂载时执行一次

  // 加载状态提示
  if (isLoading) {
    return <div>加载中...</div>;
  }

  // 错误状态提示
  if (error) {
    return <div>出错了: {error}</div>;
  }

  return (
    <div className="Real_Rapido">
      <RealDolar cotacao={realDolar} />
    </div>
  );
}

export default App;

关键优化点 #

• 用useEffect+空依赖数组，避免请求无限循环，确保仅在组件首次挂载时执行一次请求。
• 用async/await替代链式then，代码更易读，同时方便捕获请求错误。
• 新增isLoading状态，在请求过程中显示加载提示，避免页面空白。
• 新增error状态，捕获请求异常并提示用户，便于排查问题。
• 初始状态设为null，让RealDolar组件可以区分“未加载完成”和“实际值”的状态。

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