react router dom loader 延迟类型问题

Question

1. 我尝试通过在加载函数中使用

   defer

   来解决加载数据时的问题。

2. 我不知道如何设置

   postResponse

   类型，这是实际的响应数据。

3. 即使我尝试类型转换或给出任何类型，它也不起作用。

这是加载器函数的代码：

export const listPageLoader: LoaderFunction = async ({ request }) => {
  const query = request.url.split("?")[1];
  const postPromise: Promise<GetPosts> = apiRequest("/posts?" + query);
  return defer({
    postResponse: postPromise,
  });  
};

这是发生错误的代码：

<Suspense fallback={<p>Loading...</p>}>
  <Await
    resolve={data.postResponse}
    errorElement={<p>Error loading posts!</p>}
  >
    {({ postResponse }: { postResponse: GetPosts }) => {
      //  {postResponse}
      console.log(postResponse);
    }}
  </Await>
</Suspense>

这是错误信息

Type '({ postResponse }: {    postResponse: GetPosts;}) => void' is not assignable to type 'ReactNode | AwaitResolveRenderFunction'.
  Type '({ postResponse }: {    postResponse: GetPosts;}) => void' is not assignable to type 'AwaitResolveRenderFunction'.
    Type 'void' is not assignable to type 'ReactNode'.ts(2322)
components.d.ts(137, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & AwaitProps'
(property) postResponse: GetPosts

如果我的代码有任何奇怪的地方，请告诉我。

我认为可以通过 postResponse 访问数据而不会发生错误。

即使我搜索，也找不到类似的案例。

Answer 1

如果我的代码有任何奇怪的地方，请告诉我。

我认为可以通过postResponse访问数据 没有发生错误。

是的，

Await

children

渲染函数不会返回有效的JSX。您正在尝试渲染一个匿名函数

({ postResponse }: { postResponse: GetPosts }) => void

，这是不可分配给预期渲染的

void

的

React.ReactNode

。

<Await
  resolve={data.postResponse}
  errorElement={<p>Error loading posts!</p>}
>
  {({ postResponse }: { postResponse: GetPosts }) => {
    // You can console log here
    console.log(postResponse);

    // But you still need to return valid JSX, example:
    // return <Posts posts={postResponse} />;
    return null;
  }}
</Await>