揭秘 Next.js App Router 流式传输中的类型错误：终极指南

2024-05-29 10:59:39

在 Next.js 中使用 App Router 进行流式传输时的类型错误：终极指南

作为一名经验丰富的程序员和技术作家，我不断遇到各种技术挑战，其中之一就是 Next.js 中使用 App Router 时遇到的类型错误。该错误信息为：“'StreamComponent' 不能用作 JSX 组件。其返回类型 'Promise' 不是一个有效的 JSX 元素。”

问题原因

此错误的根源在于 StreamComponent 组件返回一个 Promise 对象，而 JSX 元素需要的是一个 React 元素。

解决方案

解决此问题的方案有两种：

1. 使用 Suspense

Suspense 组件允许异步加载内容，并显示占位符直到内容加载完成。你可以将 StreamComponent 组件包装在 Suspense 组件中：

<Suspense fallback={<div> Loading div </div>}>
  <StreamComponent deviceWidth={deviceWidth as number} />
</Suspense>

2. 使用 useEffect

useEffect 钩子可以让你异步加载数据，更新组件状态，并在组件渲染时使用加载好的数据。这将避免返回 Promise 的问题：

const [data, setData] = useState<PocMerchListPropsData[]>([]);

useEffect(() => {
  const getData = async () => {
    const response = await getDataFromServer();
    const formattedResponse = getFormattedResponse(response);
    setData(formattedResponse);
  };
  getData();
}, []);

const { deviceWidth } = props;

const topData = data.slice(0, 2);
const bottomdata = data.slice(2);
return (
  <div>
    <TopComponent data={topData} deviceWidth={deviceWidth as number} />
    <BottomComponent data={bottomdata} deviceWidth={deviceWidth as number} />
  </div>
);