React Router 6 useLoaderData返回Promise，无法展示API用户数组

在React Router项目中，尝试通过loader获取API数据并展示用户列表，但控制台打印的results是Response对象，而非预期的用户数组。

预期行为 #

返回结果应为用户数组对象

实际行为 #

返回结果为Response对象

源代码 #

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); // **打印结果为Response对象而非数组**
       return <>Hello</>;
     }}
  
    
  </Await>
</React.Suspense>
};

export default Homepage;

问题核心是fetch仅返回Response对象，需要手动解析响应体为JSON格式。

修改loader函数 #

两种可行方式：

1. 使用await依次处理请求和解析：

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

  return defer({
    results: userData,
  });
},

2. 通过Promise链处理：

loader: ({ request, params }) => {
  const userPromise = fetch('https://jsonplaceholder.typicode.com/users')
    .then(res => res.json());

  return defer({
    results: userPromise,
  });
},

渲染用户列表 #

修改App.jsx中的Await回调，渲染用户数组：

{(results) => {
  console.log("results", results); // 现在为用户数组
  return (
    <div className="user-list">
      <h2>用户列表</h2>
      <ul>
        {results.map(user => (
          <li key={user.id}>
            <p>姓名：{user.name}</p>
            <p>邮箱：{user.email}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}}

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