React Router DOM 6.14：defer未等待数据，Suspense fallback不渲染求助

一、先修复代码中的语法错误 #

这些基础错误是功能失效的核心原因：

1. Loader中的defer写法错误
   原代码return defer(data:语法不合法，defer必须接收对象参数，修改为：

   return defer({ data: serverAPI(url, body, "success") });
   

   同时取消body变量的注释，确保接口请求参数有效：

   const body = getBodyFromStorage();
   

2. 组件标签闭合错误
   <Suspense>和<Await>未正确闭合，修正后：

   return (
     <Suspense fallback={<p>Loader...</p>}>
       <Await resolve={data.data}>
         {(resolvedData) => (
           <>
             <Products data={resolvedData} />
           </>
         )}
       </Await>
     </Suspense>
   );
   

二、修复Loader逻辑，返回正确的Deferred数据 #

1. 避免async函数包装Defer对象
   原getItems是async函数，会把defer对象包装成Promise，导致useLoaderData()拿到的是Promise而非Deferred对象。若无需在loader内做额外异步操作，改为普通函数：

   export function getItems(request: any, primaryStore: StoreEn, otherStores: StoreEn[]) {
     try {
       const body = getBodyFromStorage();
       const url = `${urlBE}/products/${request.params.category}`;
       const dataPromise = serverAPI(url, body, "success");
       return defer({ data: dataPromise });
     } catch (error: any) {
       throw new Error(error.message);
     }
   }
   

   若必须保留async，确保没有多余的await操作，让React Router能正确解析Deferred对象。

2. 确保serverAPI返回有效Promise
   serverAPI本身是async函数，返回Promise的逻辑没问题，但需保证接口异常时错误能被正确抛出，让errorElement处理。

三、修复组件中的Await使用 #

1. 正确指定要resolve的Promise
   useLoaderData()拿到的是defer返回的对象，其中data属性才是需要等待的Promise，因此Await的resolve参数应为deferredData.data：

   const deferredData = useLoaderData();
   
   return (
     <Suspense fallback={<p>Loader...</p>}>
       <Await resolve={deferredData.data}>
         {(resolvedData) => <Products data={resolvedData} />}
       </Await>
     </Suspense>
   );
   

2. 移除多余的useState
   使用Await时无需将数据存入组件state，直接通过回调渲染即可。

四、额外检查点 #

• 确认已从react-router-dom导入所需组件：

  import { useLoaderData, Await, Suspense } from 'react-router-dom';
  

• 检查serverAPI的body参数是否有有效值，避免因空参数导致接口返回异常。

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