Next.js 12中如何将Promise转为JSON？解决React子元素Promise报错

你遇到的错误核心是直接把未完成的Promise对象当成React子元素渲染了，React无法识别Promise类型的内容。下面分场景给出具体解决方法，本质都是先等待Promise完成、把响应转为JSON，再处理渲染逻辑：

场景1：客户端组件中处理API请求 #

方法1：用useState + useEffect手动处理 #

通过状态管理异步请求的生命周期（加载、成功、错误），确保只渲染最终的JSON数据：

import { useState, useEffect } from 'react';

export default function MyComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchApiData = async () => {
      try {
        const response = await fetch('你的开源API地址');
        if (!response.ok) throw new Error('请求失败');
        const jsonData = await response.json(); // 将响应转为JSON
        setData(jsonData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchApiData();
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;

  // 直接渲染JSON数据
  return (
    <div>
      <h2>API返回内容</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

方法2：用SWR简化客户端数据获取 #

Next.js官方推荐用SWR处理客户端异步数据，自动缓存、重试，不用手动管理状态：
先安装依赖：npm install swr

import useSWR from 'swr';

// 封装获取JSON的逻辑
const fetcher = async (url) => {
  const res = await fetch(url);
  if (!res.ok) throw new Error('请求失败');
  return res.json();
};

export default function MyComponent() {
  const { data, error, isLoading } = useSWR('你的开源API地址', fetcher);

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>错误：{error.message}</div>;

  return (
    <div>
      <h2>API返回内容</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

场景2：服务器端渲染/静态生成 #

如果数据适合在服务器端获取，可以用Next.js的getServerSideProps（SSR）或getStaticProps（SSG），直接把JSON数据传递给组件：

示例：getServerSideProps（每次请求时在服务器获取数据） #

export default function MyComponent({ data, error }) {
  if (error) return <div>错误：{error}</div>;
  
  return (
    <div>
      <h2>服务器端获取的API数据</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export async function getServerSideProps() {
  try {
    const res = await fetch('你的开源API地址');
    if (!res.ok) throw new Error('请求失败');
    const data = await res.json(); // 转为JSON

    return {
      props: { data }, // 传递给组件
    };
  } catch (err) {
    return {
      props: { error: err.message },
    };
  }
}

示例：getStaticProps（构建时静态生成数据） #

适合数据不频繁更新的场景：

export default function MyComponent({ data, error }) {
  if (error) return <div>错误：{error}</div>;
  
  return (
    <div>
      <h2>静态生成的API数据</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export async function getStaticProps() {
  try {
    const res = await fetch('你的开源API地址');
    if (!res.ok) throw new Error('请求失败');
    const data = await res.json();

    return {
      props: { data },
      revalidate: 60, // 可选：每隔60秒重新生成页面
    };
  } catch (err) {
    return {
      props: { error: err.message },
    };
  }
}

关键注意事项 #

• 绝对不要直接在JSX中写{fetch('你的API地址')}，这会把Promise对象直接传给React渲染，必触发错误。
• 所有异步请求必须等待await拿到JSON结果后，再通过状态或props传递给渲染逻辑。

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