問題タブ [react-suspense]

私は、データをフェッチし、反応サスペンスを利用するフックを作成しようとしています。ページ (およびこの記事) の例を使用して、データをフェッチする関数 (フックに変換したい) を作成しました。

例

コードサンドボックスはこちら

問題

現在、呼び出されたときに実行されるため、関数を介してデータを渡すことはできません。データを渡してuseWrap(**HERE**)使用したいfetchData()

期待される動作/ターゲット

1. データを useWrap() に渡して fetchData() に入れたい
2. 基本的なフックを利用するために、useWrap をフックにしたい
3. React Suspenseを活用したい

誰かがこれらのニーズを達成する方法を知っていて、私が間違っていることを教えてくれますか?

ありがとうございました！

Powersフェッチ/未定義のときにフォールバック コンポーネントをレンダリングしたい。React.Suspenseコードを使用してロジックに実装しました。

そして私のRoutesPowersは

しかし、それはCannot read property "map" of nullおそらくpowersnullであるためです。つまり、本来の機能を果たせてReact.Suspenseいないということです。誰でもこれについて私を助けることができますか?

実験的な新しい React 機能Suspense for data fetching を使用しようとしています。

useApiこれは、（サスペンスを正しく理解している場合）fetch呼び出しの結果を返すか、サスペンダーの約束をスローする単純なフックです。(文書化された例をわずかに変更)

私はこのフックを次のように単純に使用しています:

それは決して解決しません。

useRef問題は、それが想定どおりに機能していないことだと思います。

ref をランダムな値で初期化すると、その値は保持されず、代わりに別のランダムな値で再初期化されます。

suspenderをスローすると、useRefすべての呼び出しで が再初期化されるという奇妙なことがあります。

その行を削除するとuseRef意図したとおりに機能しますが、明らかにサスペンスは機能しません。

私がそれを機能させる別の方法は、次のように、React の外部である種のカスタム キャッシングを使用する場合です。

これでも機能しますが、コンポーネント固有のデータをキャッシュするという点で React 自体が提供するものを使用したいと思います。

useRefサスペンスでの作業方法について、何かが欠けていますか?

再現: https://codesandbox.io/s/falling-paper-shps2

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

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

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

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

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

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

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

React ルーターを使用して、特定の URL に従ってさまざまなページをレンダリングしています。いいえ、React.lazyを使用してすべてのページ コンポーネントを遅延読み込みしたかったのです。

これは非常にうまく機能しますが、に行くと/page、すべてHomeが消え、フォールバックLoading page...コンポーネントしか表示されません (ページが消えて、別のページがすぐに表示され、ユーザーにとって邪魔になります)。

これはのデフォルトの動作ですReact.Suspenseが、この場合、実際のホームページを画面に表示し、Loading page...メッセージを上部に表示し、Pageコンポーネントがロードされたら、それをレンダリングしてホームページを置き換える方法はありますか?