マウント後にのみアクセスできるデータを使用してフックを初期化するにはどうすればよいですか?

Question

これが私がやろうとしていることの例です:

リーリー

ご覧のとおり、id の値を使用して useCollection フックを初期化しています。ただし、ID は変更され、最初は未定義になり、その後正しい値に変更されます。これにより全体が破綻し、上記のコードは typescript でも機能しません。 ID を定義した後、useCollection フックを初期化する必要があります。これは、コンポーネントが「インストール」された後でのみ行われます。 useCollection(...) を useEffect 内に入れてみましたが、機能しません。

Answer 1

nextjs を使用しているため、getServerSideProps を利用してコンポーネントの ID を初期プロップとして生成でき、常に定義されるようになります。 リーリー

そして、それをコンポーネントからプロップとして受け取ります:

リーリー