javascript - Suspense フックと React フックを理解する

Question

SuspenseおよびReact フックの使用に関する問題を見つけるのに苦労しています。

以下の React コードにはいくつかの重要な問題があります。

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} />
  </>
};

彼らが何であるか教えてください。

2 つの重要な問題が見つかりました。

• 依存関係配列setdataでの誤用useEffect
• suspense fallback小道具を提供しませんでした。

まだ重要な問題が 1 つ残っていると思います。

userId奇妙なことの 1 つは、依存配列に含める必要がある理由です。