如何解决 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') 看似逻辑正确：使用 useEffect 在组件挂载后发起请求，通过 useState 存储并渲染结果。但实际页面为空，且控制台很可能报出类似 Blocked by CORS policy 的错误——这正是问题的核心。

CORS（跨源资源共享）是浏览器强制执行的安全机制：当 React 开发服务器（如 http://localhost:3000）尝试直接向 https://zenquotes.io 发起请求时，若该 API 未在响应头中明确声明允许你的源（Access-Control-Allow-Origin: http://localhost:3000），浏览器将拦截响应体，导致 .json() 解析失败，setQuote 不会被调用，quote 始终为 null，最终

{quote}

渲染为空白。

✅ 验证方式：打开浏览器开发者工具 → Network 标签页 → 找到该请求 → 查看 Response 或 Preview 标签是否为空，并检查 Headers 中是否存在 Access-Control-Allow-Origin 字段。

? 可行解决方案：

优先使用已支持 CORS 的 API 端点
ZenQuotes 实际提供了带 CORS 支持的备用域名：
```
fetch('https://api.zenquotes.io/v1/quotes/random')
```
✅ 该地址默认允许前端直连（返回头含 Access-Control-Allow-Origin: *），可直接替换原 URL。
配置开发代理（推荐用于本地开发）
在 package.json 中添加：
```
"proxy": "https://api.zenquotes.io"
```
然后修改请求为相对路径：
```
fetch('/v1/quotes/random') // 自动代理到 https://api.zenquotes.io/v1/quotes/random
```
⚠️ 注意：此方式仅在开发环境（npm start）生效，构建生产版（npm run build）后需由 Nginx/Apache 等反向代理配合。
服务端中转（适用于生产环境或复杂场景）
创建一个 Express 路由（如 /api/quote），在服务端发起请求并转发响应，规避浏览器 CORS 限制。

? 额外优化建议：

react design

将 Learn Social Studies 品牌系统应用于 React 界面，采用 CSS 变量、可复用组件规范，默认浅色主题并支持深色主题。

下载

避免直接渲染 quote 对象（JSX 中对象不可渲染），应提取字段：
```
{quote ? <p>{quote.q} — {quote.a}</p> : <p>Loading...</p>}
```

添加加载态与错误处理：

const [quote, setQuote] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  setLoading(true);
  fetch('https://api.zenquotes.io/v1/quotes/random')
    .then(res => {
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return res.json();
    })
    .then(data => setQuote(data[0]))
    .catch(err => setError(err.message))
    .finally(() => setLoading(false));
}, []);

if (loading) return <main><p>Loading...</p></main>;
if (error) return <main><p>Error: {error}</p></main>;
return <main><p>{quote?.q} — {quote?.a}</p></main>;

总结：前端无法绕过浏览器 CORS 策略，关键在于选择兼容的 API 地址或借助代理层。优先尝试 https://api.zenquotes.io/v1/quotes/random，它专为前端直连设计，无需额外配置即可正常工作。