React Suspense未正常工作，以下实现代码的3个核心问题该如何修复？

3个核心问题说明 #

• 数据获取逻辑不符合Suspense触发规则：Suspense仅能捕获子组件渲染阶段抛出的未完成Promise，当前代码采用useEffect+useState的传统异步获取方案，不会抛出任何Promise，Suspense完全无法识别加载状态，也不会触发加载UI，初始空data还会导致页面渲染空白的name、email字段。
• Suspense组件缺少必填的fallback属性：<Suspense>标签必须传入fallback参数指定加载过程中展示的占位UI，当前代码未配置该属性，即便满足触发条件也无法正常工作。
• 并发场景存在竞态风险：当前useEffect的实现未做请求有效性校验，并发模式下如果userId快速切换，旧请求晚于新请求返回时会覆盖状态，导致渲染内容和当前userId不匹配。

修复后代码 #

import { Suspense } from 'react';

// Suspense兼容的请求包装工具，符合官方约定的实现逻辑
function wrapPromise(promise) {
  let status = 'pending';
  let result;
  const suspender = promise.then(
    res => {
      status = 'success';
      result = res;
    },
    err => {
      status = 'error';
      result = err;
    }
  );
  return {
    read() {
      if (status === 'pending') throw suspender;
      if (status === 'error') throw result;
      return result;
    }
  };
}

// 模拟原有的请求方法，保留你原有fetchUserProfile的业务实现即可
const fetchUserProfile = (userId) => {
  return fetch(`/api/user/${userId}`).then(res => res.json());
};

// 提前创建请求资源，遵循Suspense "render as you fetch"的设计理念
const getUserProfileResource = (userId) => wrapPromise(fetchUserProfile(userId));

const SuspensefulUserProfile = ({ userId }) => {
  const resource = getUserProfileResource(userId);
  return <UserProfile resource={resource} />;
};

const UserProfile = ({ resource }) => {
  // 渲染阶段读取数据，未加载完成自动抛出Promise触发上层Suspense
  const data = resource.read();
  return (
    <>
      <h1>{data.name}</h1>
      <h2>{data.email}</h2>
    </>
  );
};

const UserProfileList = () => (
  <>
    {/* 每个独立模块单独配置Suspense和fallback，互不影响加载状态 */}
    <Suspense fallback={<div>用户信息加载中...</div>}>
      <SuspensefulUserProfile userId={1} />
    </Suspense>
    <Suspense fallback={<div>用户信息加载中...</div>}>
      <SuspensefulUserProfile userId={2} />
    </Suspense>
    <Suspense fallback={<div>用户信息加载中...</div>}>
      <SuspensefulUserProfile userId={3} />
    </Suspense>
  </>
);

内容的提问来源于stack exchange，提问作者The Newbie