プロパティを他のコンポーネントにオーバーライドする必要があるまで、useEffect がデータを「取得」しないのはなぜですか...?

Question

サーバーから「ユーザー情報」を「取得」しようとします。

API GET URL は:/users/${memberId} です userID は数値型の memberId (例 4)

以下は私の質問です..

「」の「userIcon」をクリックすると、ページにリンクして正しいユーザー情報をロードする必要があります

ローカルホストのページを直接確認しようとすると、表示されません。 しかし、「 userId={userData.memberId} 」を削除すると、ページが表示されて書き換えられます 「userId={userData.memberId}」を保存すると、ページは正常になります。

リーリー

「userId={userData.memberId}」のリンクは、パス UserPage に使用されます。 これは console.log(userData)

です

ここに画像の説明を入力してください

リーリー

問題は、UserIcon をクリックすると機能せず、エラーが発生することです。 エラーは <<无法读取未定义的属性（读取'memberId'）>

# を示しています

それでは、なぜ私のコードが機能しないのでしょうか? : ユーザー アイコンをクリックし、uerl /users/${memberId} を使用して UserPage に移動します。 LoginHeader の memberId プロパティを削除するまで useEffect 'GET' が機能しないのはなぜですか? ? ?

Answer 1

userData は 未定義 であるためです。どこでどのように初期化するのかは示されていませんが、次のようなものですか? ：

リーリー

これにより、unknown に初期化されます。したがって、コンポーネントが最初にレンダリングされるとき、unknown であるため、userData からプロパティを読み取ることはできません。 後で値が得られる可能性があります しかし、その時点でコードはすでにエラーをスローしています。

1 つのオプションは、空のオブジェクトとして初期化することです:

リーリー

この場合、userData.memberId はエラーをスローしませんが、unknown 値をコンポーネントに渡します。

別のオプションは、userData に値が設定されるまでコンポーネントをレンダリングしないことです:

リーリー

どのオプションを好むかは完全にあなた次第です。ただし、重要なことは、unknown からプロパティを読み取ることはできないということです。