如何解决 React 应用中 Fetch API 返回数据无法渲染的问题-js教程-PHP中文网

如何解决 React 应用中 Fetch API 返回数据无法渲染的问题

React 中使用 fetch 获取远程 API 数据时页面空白，通常因 CORS 限制导致请求失败且未正确处理响应或错误，需通过代理、服务端中转或选择支持 CORS 的 API 解决。

react 中使用 `fetch` 获取远程 api 数据时页面空白，通常因 cors 限制导致请求失败且未正确处理响应或错误，需通过代理、服务端中转或选择支持 cors 的 api 解决。

在你的代码中，fetch('https://zenquotes.io/api/random') 看似简洁，但实际运行时很可能因 跨域资源共享（CORS）策略被浏览器拦截，导致 fetch 请求根本未返回有效响应——此时 .then(res => res.json()) 可能抛出异常，而你仅用 console.log(err) 输出错误，却未在 UI 中体现，加之 quote 初始为 null，JSX 中直接 {quote} 渲染 null 或 undefined 时不会显示任何内容，因此页面呈现为空白。

✅ 正确做法：增强健壮性 + 规避 CORS

1. 添加加载与错误状态提示

避免“静默失败”，应明确展示加载中、成功、失败三种状态：

import { useEffect, useState } from 'react';

export default function Home() {
  const [quote, setQuote] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch('https://zenquotes.io/api/random')
      .then((res) => {
        if (!res.ok) {
          throw new Error(`HTTP ${res.status}: ${res.statusText}`);
        }
        return res.json();
      })
      .then((data) => {
        if (Array.isArray(data) && data.length > 0) {
          setQuote(data[0]);
        } else {
          throw new Error('Invalid response format: expected non-empty array');
        }
      })
      .catch((err) => {
        console.error('Fetch failed:', err);
        setError(err.message);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  if (loading) return <main><p>Loading...</p></main>;
  if (error) return <main><p>Error: {error}</p></main>;
  if (!quote) return <main><p>No quote available</p></main>;

  return (
    <main><blockquote>
        <p>{quote.q}</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7009" title="Ainative React Sdk"><img
														src="https://img.php.cn/upload/skill/000/000/081/179125754152251.jpg" alt="Ainative React Sdk" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill7009" title="Ainative React Sdk" class="overflowclass">Ainative React Sdk</a>
													<p class="overflowclass">使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill7009" title="Ainative React Sdk" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
        <footer>— {quote.a}</footer>
</blockquote>
    </main>
  );
}

? 注意：ZenQuotes API 返回结构为 [{ q: "quote text", a: "author", ... }]，直接访问 data[0].q 才能获取正文，而非直接渲染整个对象。

2. 关于 CORS 的现实解决方案

开发阶段（Create React App）：可在 package.json 中添加代理（⚠️仅限开发环境，且要求后端支持）：
```
"proxy": "https://zenquotes.io"
```
然后将请求改为相对路径：fetch('/api/random')。但注意：ZenQuotes 未将其 API 配置为允许 localhost 跨域，因此该代理在 CRA 中实际无效（CRA 代理不修改 Origin 头，仍受目标服务 CORS 策略限制）。

可靠方案：使用后端代理或替换 API

✅ 推荐：改用明确支持前端直连的替代 API（如 Quotable），它默认开启 CORS：

fetch('https://api.quotable.io/random')
  .then(res => res.json())
  .then(data => setQuote(data)); // data 直接是对象，非数组

✅ 或自行搭建轻量代理（如 Express）：

// server.js
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
app.use('/api/quotes', createProxyMiddleware({ target: 'https://zenquotes.io', changeOrigin: true }));
app.listen(3001);

前端请求 fetch('/api/quotes/api/random') 即可绕过浏览器 CORS 限制。

3. 关键注意事项

❌ 不要依赖 console.log 判断逻辑是否执行——务必检查浏览器 DevTools 的 Network 标签页，确认请求是否发出、状态码是否为 200，以及 Console 是否有 CORS 错误（如 “Blocked by CORS policy”）。
❌ 避免在 JSX 中直接 {quote} 渲染可能为 null/undefined/object 的值；优先解构并提供 fallback。
✅ 生产环境永远不要暴露敏感 API 密钥或绕过安全策略——CORS 是浏览器安全基石，合理利用代理才是工程化实践。

综上，页面空白的根源不在 React 或 fetch 本身，而在未捕获的网络异常与缺乏用户反馈。修复的核心是：显式处理加载/错误状态 + 选择可直连的 API 或引入可控代理层。