javascript - 反应悬念不起作用，我不知道为什么

Question

我得到了一个项目来找出为什么下面的代码行不起作用。以下代码实现了 React Suspense API，但没有正确执行。这些组件如何利用 Suspense 和并发模式存在 3 个核心问题，这是我不熟悉的，即使在阅读文档后我仍然无法修复它

import { Suspense, useState, useEffect } from 'react';

const SuspensefulUserProfile = ({ userId }) => {
  const [data, setData] = useState({});
  useEffect(() => {
    fetchUserProfile(userId).then((profile) => setData(profile));
  }, [userId, setData])
  return (
    <Suspense>
      <UserProfile data={data} />
    </Suspense>
  );
};
const UserProfile = ({ data }) => {
  return (
    <>
      <h1>{data.name}</h1>
      <h2>{data.email}</h2>
    </>
  );
};
const UserProfileList = () => (
  <>
    <SuspensefulUserProfile userId={1} />
    <SuspensefulUserProfile userId={2} />
    <SuspensefulUserProfile userId={3} />
  </>
);

Answer 1

为了让 Suspense 具有任何价值，您需要异步加载组件。这通常转化为动态导入。

export default const UserProfile = ({ data }) => {
  return (
    <>
      <h1>{data.name}</h1>
      <h2>{data.email}</h2>
    </>
  );
};

然后，仅在需要 React 的惰性时才导入 UserProfile：

const UserProfile = React.lazy(() => import('./UserProfile'))

并使用它：

<Suspense fallback={'Loading...'}>
  <UserProfile data={data} />
</Suspense>