問題タブ [use-ref]

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

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

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

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

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

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

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

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

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

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

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

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

検索コンポーネントで特定の計算を行いたい。これを行うには、Header コンポーネントで取得した buttonSearchRefOffsetLeftValue を Search コンポーネントに渡す必要があります。ヘッダーで目的の値を取得します。ただし、検索コンポーネントでは常に未定義になります。この振る舞いが理解できません。