React 18 Suspense Fallback 不适用于数据获取？答案

【问题标题】：React 18 Suspense Fallback not working on Data Fetching?React 18 Suspense Fallback 不适用于数据获取？
【发布时间】：2023-02-12 16:56:51
【问题描述】：

我基本上是在获取一堆用户数据并在页面加载时显示他们的用户名列表。我使用悬念的目的是在处理 userList 组件时显示“正在加载...”文本，但由于某种原因它不显示回退中提到的加载文本。我正在使用最新的 React 18 版本。

import React, { useState, useEffect, Suspense } from "react";

function UsersList() {
  // Fetches and returns List of users
  const [users, setUsers] = useState([]);
  useEffect(() => {
    try {
      fetch("https://jsonplaceholder.typicode.com/users")
        .then((response) => response.json())
        .then((data) => setUsers(data));
    } catch (error) {
      // handle the error here
    }
  }, []);

  return (
    <div>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <h2>Users List</h2>
      <Suspense fallback={<h1> Loading...</h1>}>
        <h4> Below are the user detailed fetched : </h4>
        <UsersList />
      </Suspense>
    </div>
  );
}

export default App;

我尝试使用节流来降低 chrome 开发工具上的网络速度，但仍然没有显示加载文本。

【问题讨论】：

标签： javascript node.js reactjs

【解决方案1】：

Suspense 应该如何知道您正在获取数据？

来自docs：

仅有的启用 Suspense 的数据源将激活 Suspense 组件.
他们包括：

使用支持 Suspense 的框架（如 Relay 和 Next.js）获取数据

使用 lazy 延迟加载组件代码

Suspense 不会检测何时在 Effect 或事件处理程序中获取数据。

尚不支持在不使用固定框架的情况下启用悬念的数据获取。实现启用 Suspense 的数据源的要求不稳定且未记录。用于将数据源与 Suspense 集成的官方 API 将在 React 的未来版本中发布。

Tl;DR：您还不能轻松地自己使用它。

【讨论】：