将标题代码抽象为SectionLayout组件后页面输出AsyncGenerator异常

把标题代码抽象为SectionLayout布局组件后，页面未渲染出预期内容，反而显示[object AsyncGenerator]对象。相关代码片段如下：

const categories = [chips, kebab];
---

<SectionLayout title="menu">
  <div
    class="m-auto grid w-9/12 grid-flow-row grid-cols-1 gap-x-40 md:grid-cols-2 lg:w-7/12"
  >
    {
      categories.map((category, index) =>
        category.map(function (item) {
          if (item.name == "title") {
            if (index >= 1) {
              return (
                <h3 class="col-span-1 mt-8 border-t-2 border-orange-600 pt-8 pb-4 text-center text-4xl font-semibold uppercase text-zinc-800 md:col-span-2">
                  {item.description}
                </h3>
              );
            } else {
              return (
                <h3 class="col-span-1 mt-8 text-center text-4xl font-semibold uppercase text-zinc-800 md:col-span-2">
                  {item.description}
                </h3>
              );
            }

问题原因 #

核心问题出在SectionLayout组件的定义上：

• 你可能把组件写成了异步函数或者不小心使用了异步生成器语法（比如async function、yield*），导致组件返回的是一个异步生成器对象，而非可直接渲染的JSX元素。
• 即便组件仅包含样式化section标签和标题，只要函数被标记为async，就会返回Promise或异步生成器，而非普通JSX。

解决方案 #

1. 修正组件为同步函数
   检查SectionLayout的定义，确保它是普通同步函数组件：

   // 错误写法（带async）
   async function SectionLayout({ title, children }) {
     return (
       <section className="your-styles">
         <h2>{title}</h2>
         {children}
       </section>
     );
   }
   
   // 正确写法（同步函数）
   function SectionLayout({ title, children }) {
     return (
       <section className="your-styles">
         <h2>{title}</h2>
         {children}
       </section>
     );
   }
   

2. 若需异步逻辑，用状态管理处理
   如果组件确实需要处理异步操作（比如异步取数），不要直接把组件写成异步函数，改用状态钩子管理异步数据：

   import { useState, useEffect } from 'react';
   
   function SectionLayout({ title, children }) {
     const [asyncData, setAsyncData] = useState(null);
   
     useEffect(() => {
       async function fetchData() {
         const data = await yourAsyncFetch();
         setAsyncData(data);
       }
       fetchData();
     }, []);
   
     // 加载状态兜底
     if (!asyncData) return <div>Loading...</div>;
   
     return (
       <section className="your-styles">
         <h2>{title}</h2>
         {children}
         {/* 渲染异步数据 */}
         <div>{asyncData.content}</div>
       </section>
     );
   }
   

3. 检查子元素的map逻辑
   确认categories.map的嵌套逻辑完整且返回的都是有效JSX元素，避免因代码截断或逻辑错误返回非可渲染对象。

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