Netflixのクローンを作るチュートリアルの4章のエラー解消

こんにちは、なもちです！

今日は、テリーさんが書かれた、ZennのReactのハンズオン【React+TypeScript】Netflixのクローンを作るチュートリアル を実施するときに、4章のエラーで詰まったので、共有していきたいと思います。

結論から言うと、index.tsx のコードが要因で、Layout コンポーネントに movies の値を正しく渡せていないことでした。

初めての、技術ブログなので、拙いところもありますが、多めに見てやってくだせぇ

それでは行きましょう！

4章のエラーコード

Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at Layout (Layout.tsx:15:17)
    at renderWithHooks (react-dom_client.js?v=4c5098d6:11548:26)
    at mountIndeterminateComponent (react-dom_client.js?v=4c5098d6:14926:21)
    at beginWork (react-dom_client.js?v=4c5098d6:15914:22)
    at HTMLUnknownElement.callCallback2 (react-dom_client.js?v=4c5098d6:3674:22)
    at Object.invokeGuardedCallbackDev (react-dom_client.js?v=4c5098d6:3699:24)
    at invokeGuardedCallback (react-dom_client.js?v=4c5098d6:3733:39)
    at beginWork$1 (react-dom_client.js?v=4c5098d6:19765:15)
    at performUnitOfWork (react-dom_client.js?v=4c5098d6:19198:20)
    at workLoopSync (react-dom_client.js?v=4c5098d6:19137:13)

プロパティが認識できず、map ができていないことがエラーの要因と認識。

import { useProps } from "./useProps";
import { Layout } from "./Layout";

type Props = {
  title: string;
  fetchUrl: string;
  isLargeRow?: boolean;
};

export const Row = ({ title, fetchUrl, isLargeRow }: Props) => {
  return (
    <Layout title={title} isLargeRow={isLargeRow} {...useProps(fetchUrl)} />
  );
};

プロパティが undefined でmapができていないということは、props が上手く渡せていない可能性が高い。

おそらく、{…useProps(fetchUrl)} がエラー根源であると判断。

解決方法

元のコード

import { useProps } from "./useProps";
import { Layout } from "./Layout";

type Props = {
  title: string;
  fetchUrl: string;
  isLargeRow?: boolean;
};

export const Row = ({ title, fetchUrl, isLargeRow }: Props) => {
  return (
    <Layout title={title} isLargeRow={isLargeRow} {...useProps(fetchUrl)} />
  );
};

変更したコード

import { useProps } from "./useProps";
import { Layout } from "./Layout";

type Props = {
  title: string;
  fetchUrl: string;
  isLargeRow?: boolean;
};

export const Row = ({ title, fetchUrl, isLargeRow }: Props) => {
  const movies = useProps(fetchUrl);

  return (
    <Layout title={title} movies={movies} isLargeRow={isLargeRow} />
  );
};

エラーの要因

useProps(fetchUrl)はmoviesの配列そのものを返すので、{...useProps(fetchUrl)}と書くとmoviesのプロパティとしてではなく、配列そのものが展開されてしまい、moviesがundefinedになってしまうことが要因。

そのため、useProps(fetchUrl)から返されるmoviesを変数として受取り、明確にmovies={movies} として渡すように変更しました。

解決

無事、映画一覧を取得することができた！

ストレンジャー・シングスはまだ途中までしか見れてないので、時間ができたらいつか見たいと思います笑

それよりも、地面師とか、アマプラの龍が如くが見たくてたまりません！

ということで、見てくださりありがとうございました！

では、おつかれちゃん！

ほな、また！