関数をプロパティとして 2 つのコンポーネントに渡すと、ターゲット コンポーネントで未定義が返される

Question

rree

これが親コンポーネントで、ここから handleNewLikes 関数を prop として Row に渡します。

リーリー

これは、handleNewLikes 関数をメディアに渡す行コンポーネントです。

リーリー

メディアでは、関数がコンソールで定義されている場合もあれば、未定義の場合もあります。また、ハートのアイコンをクリックして handleLikes 関数がトリガーされると、その中の handleNewLikes 関数は常に未定義として表示されます。

これがコンソールに表示される内容です

助けてくれてありがとう、数日間行き詰まってしまいました笑

おそらく何らかの状態管理ライブラリを使用できることはわかっていますが、それにはかなりの量のリファクタリングが必要になります。これでうまくいくはずだと感じていますが、そうしない限り、なぜ問題が発生するのか分かりません。私は近視です。

Answer 1

コードをコピーし、何が起こっているかを確認できるようにいくつかのログを追加しました。 handleNewLikes を Home -> Main と Home -> Row 0 から渡しただけです。

残りの行の handleNewLikes は、この関数を渡さなかったため、正しく 未定義になります。私の言っている意味を理解するには、これらのログをチェックしてください:

#Media コンポーネントに到達したら、handleLikes を呼び出すときに、未定義の handleNewLikes 関数を使用しようとします。

// Media.tsx 48 行目 const handleLikes = () => { const token = window.localStorage.getItem("trailerflix-jwt"); if (トークン && contextValue?.user?.user) { アクシオス .post("/auth/likes", item, { ヘッダー: { "コンテンツタイプ": "アプリケーション/json", 「X-Access-Token」: トークン } }) .then((応答) => { console.log(ハンドル新しいいいね); // Mediaに渡されるRowに渡されないため未定義 ハンドルNewLikes(アイテム); setIsLiked(true); }) .catch((エラー) => { console.error("POST 中に取得に失敗しました", error); }); } それ以外 { window.alert("ムービーを保存するにはサインインする必要があります!"); } };

これは、

Media コンポーネントの like ボタン をクリックしたときのログです:

最も簡単な解決策は、

handleNewLikes を含む、Home の Row 実装のパラメータを更新することです。 <行 行ID='1' title='今日の米国の映画トップ 10' fetchURL={リクエスト.人気} handleNewLikes={handleNewLikes} /> //行 2、行 3 などにも同じことが当てはまります...

これは 

Row 1

に関数を渡していいねボタンをクリックしたログです #^ 何らかの状態管理を使用する必要があります。これを行うためにライブラリを使用する必要はありません。状態がそれほど複雑でない場合は、AuthContext

で行ったのと同様の React コンテキストを使用できます。