React中如何通过Fetch获取JSON数据并在HTML中以文本形式展示

没问题，我来帮你把JSON数据渲染到页面上！你当前的代码已经能成功获取到JSON数据，但缺少了把数据存入组件状态的步骤——React函数组件里，只有存在状态（state）里的数据才能在JSX中被访问和渲染。

下面是完整的实现方案，我会一步步解释：

步骤1：引入React状态钩子 #

首先，我们需要用useState来存储获取到的JSON数据，用useEffect来触发异步的Fetch请求（避免组件每次渲染都重复请求）。

步骤2：完整代码实现 #

import { useState, useEffect } from 'react';

function JsonDisplay() {
  // 声明状态变量存储JSON数据、加载状态和错误信息
  const [jsonData, setJsonData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 用useEffect执行Fetch请求
  useEffect(() => {
    const fetchJsonData = async () => {
      try {
        const response = await fetch(jsonlist); // 这里的jsonlist是你的请求链接
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const data = await response.json();
        setJsonData(data);
      } catch (err) {
        setError(err.message);
        console.error(err);
      } finally {
        setLoading(false); // 请求结束后，不管成功失败都取消加载状态
      }
    };

    fetchJsonData();
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  // 页面渲染逻辑
  return (
    <div>
      {loading && <p>加载中...</p>}
      {error && <p style={{ color: 'red' }}>出错了：{error}</p>}
      {jsonData && (
        <pre>
          {/* JSON.stringify第三个参数是缩进空格，让JSON格式更美观易读 */}
          {JSON.stringify(jsonData, null, 2)}
        </pre>
      )}
    </div>
  );
}

export default JsonDisplay;

关键细节说明 #

• 状态管理：用useState维护jsonData、loading、error三个状态，分别对应数据、加载状态和错误信息，让页面能根据不同状态给出清晰反馈。
• 异步请求优化：把Fetch用async/await改写，比链式then更易读；放在useEffect里并设置空依赖数组，确保只在组件挂载时请求一次。
• 渲染格式：用<pre>标签包裹JSON字符串，它会保留换行和缩进，让JSON结构更清晰；JSON.stringify的第三个参数2表示用2个空格缩进，进一步提升可读性。
• 错误处理：增加了HTTP状态码的判断（比如404、500），并把错误信息展示在页面上，方便用户和开发者排查问题。

如果你的jsonlist是动态变化的变量，记得把它加到useEffect的依赖数组里，这样当jsonlist更新时会自动重新请求数据。

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