router.query は空である可能性がある

  const { id } = router.query;
  const topicId = Array.isArray(id) ? id[0]! : id!;
  useEffect(() => {
    get_topic(topicId).then(...);
  }, [topicId]);

上記のコードで問題が起こっている箇所は useEffect が実行されるタイミングです。router.query から id を取得し、それを topicId に代入していますが、この操作はページが初めてロードされたときに実行されます。このとき router.isReady はまだ false である可能性があり、したがって router.query はまだ空である可能性があります。その結果、 topicId は undefined になります。

なんで初回レンダリング時にルートが確定してないんだよ...

nishio

   const topicId = Array.isArray(id) ? id[0]! : id!;

[gpt.icon]上記のコードで問題が起こっている箇所は useEffect が実行されるタイミングです。router.query から id を取得し、それを topicId に代入していますが、この操作はページが初めてロードされたときに実行されます。このとき router.isReady はまだ false である可能性があり、したがって router.query はまだ空である可能性があります。その結果、 topicId は undefined になります。

[nishio.icon]なんで初回レンダリング時にルートが確定してないんだよ...

Related Pages