javascript - React-router 6.0 - useLoaderData 返回一个 promise 。无法显示数据

Question

https://github.com/erAnusriM/react_router_trial 上面是我的github仓库。 如何实现在 App.jsx 文件中打印从 API 返回的用户列表 当我在控制台上打印结果的值时，它会给我一个 Response 对象。

预期行为 结果应该是一个数组对象

实际行为 结果是一个 Response 对象

引用https://reactrouter.com/en/main/hooks/use-loader-data
以下是我的源代码

main.jsx

import React, { useRef } from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, defer, RouterProvider } from "react-router-dom";
import Homepage from "./App";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Homepage />,

    loader: async ({ request, params }) => {
        
      const data = fetch('https://jsonplaceholder.typicode.com/users');

      return defer({
        results: data,
      });
    },
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

App.jsx

import React, { useState } from 'react'
import { useLoaderData, Await, useAsyncValue } from "react-router-dom";
import reactLogo from './assets/react.svg'
import './App.css'

const Homepage = () => {
  const {results} = useLoaderData()

 // Render the data when it is available
  return <React.Suspense
  fallback={<p>Loading data...</p>}
>

  <Await
    resolve={results}
    errorElement={
      <p>Error loading data</p>
    }
      
  >
    
     {(results) => {
       console.log("results", results); <== **prints results as a Response object not array**
       return <>Hello</>;
     }}
  
    
  </Await>
</React.Suspense>
};

export default Homepage;

Answer 1

在您的loader函数中，data是fetch响应值，而不是实际数据。 “https://jsonplaceholder.typicode.com/users” 返回必须也访问的 JSON 值。这是另一个值得等待的 Promise。

典型的加载程序流程可能类似于:

loader: async ({ request, params }) => {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");

  return { results: response.json() };
}

const { results } = useLoaderData();

当此加载程序可能比平时花费更多时间时，可以使用defer实用程序。

loader: async ({ request, params }) => {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");

  return defer({
    results: response.json()
  });
}

const Homepage = () => {
  const { results } = useLoaderData();

  // Render the data when it is available
  return (
    <React.Suspense fallback={<p>Loading data...</p>}>
      <Await resolve={results} errorElement={<p>Error loading data</p>}>
        {(results) => {
          console.log({ results }); // <-- array of objects
          return <>Hello</>;
        }}
      </Await>
    </React.Suspense>
  );
};