Reactjs 无法使用 Suspense 和 Await 获取数据

我正在努力在我的Reaction应用程序中使用Suspense和Await.我正在使用数据加载器在呈现组件之前加载数据. 当我简单地使用装载器函数和useLoderData函数时，我就能够获取数据.但是，在获取数据时有一些延迟，所以我想使用Suspense和Await延迟加载程序.

When I use this I only get some Response object.

Home.jsx(S)

import React, { Suspense } from "react";
import { getBookmarks } from "./api";
import { useLoaderData, defer, Await } from "react-router-dom";

export function loader() {
  return defer({ bookmarks: getBookmarks() });
}

export default function Home() {
  const dataPromise = useLoaderData();

  function renderBookMarks(bookmarks) {
    console.log(bookmarks);
  }

  return (
    <div>
      <h2>Welcome to bookmarks</h2>
       <Suspense fallback={<h2>Loading...</h2>}>
        <Await resolve={dataPromise.bookmarks}>
          {renderBookMarks}
        </Await>
      </Suspense>
    </div>
  )
}

火.js

import config from './config'

const apiUrl = config.apiUrl;
const apiPort = config.apiPort;

const joinUrl = (baseUrl, url) => {
  return ${baseUrl}/${url}
}

const domain = ${apiUrl}:${apiPort}/api/bookmarks;

export async function getBookmarks(url = "") {
  url = joinUrl(domain, url)
  const data = await fetch(url);
  return data;
}