React中从API获取数据后如何在前端显示原始JSON数据？

错误原因 #

你触发的报错是因为React不能直接渲染JavaScript对象作为子元素。当你把API返回的对象直接放进JSX里时，React无法解析这个对象结构，因此抛出该错误。

解决方案：把对象转成格式化字符串 #

要直接显示原始JSON，只需用JSON.stringify()把对象转换成带格式的字符串，再配合<pre>标签保留排版即可。

核心代码片段

{/* 数据存在时渲染格式化后的JSON */}
{productData && (
  <pre>{JSON.stringify(productData, null, 2)}</pre>
)}

• JSON.stringify(obj, null, 2)：第二个参数null表示不过滤任何属性，第三个参数2表示用2个空格缩进，让JSON结构更易读
• <pre>标签：自动保留字符串中的换行和空格，让JSON显示为标准的格式化样式
• productData &&：避免初始状态（数据未获取）时渲染null引发的额外错误

完整组件示例

import { useState } from 'react';

function App() {
  const [productData, setProductData] = useState(null);

  const fetchData = async () => {
    try {
      const res = await fetch('https://dummyjson.com/products/1');
      const data = await res.json();
      setProductData(data);
    } catch (err) {
      console.error('数据获取失败:', err);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={fetchData}>获取数据</button>
      {productData && (
        <div style={{ marginTop: '20px' }}>
          <pre>{JSON.stringify(productData, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

export default App;

额外提示 #

• 如果API返回的是数组，同样可以用这个方法，只需将状态变量换成数组类型即可
• 若数据存在循环引用，JSON.stringify会报错，此时可通过第二个参数（replacer函数）过滤循环属性：

  JSON.stringify(productData, (key, value) => {
    if (key === '循环引用属性名') return undefined;
    return value;
  }, 2)
  

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