0

私が使用useEffectし、内部で関数を呼び出すコンポーネントがありますfetchLatest()。fetchLatest()は、その年にリリースされたすべての映画を取得するネットワーク リクエストを作成するアクションです。私は Redux を使用しており、私のストアにはstate.movies.latest、アプリを初めて起動するたびに、映画の最新の行が正確であり、データが重複していません。別のコンポーネントをレンダリングしてホーム コンポーネントに戻ると、fetchLatest重複したデータが取得されます。

私の問題は、レデューサーで次のようなものを返すためであることがわかりました...

return {
    ...state,
    latest: [...state, ...payload]
}

はpayloadオブジェクト (動画) の配列です。

そこで、レデューサーを次のように変更しました...

return {
    ...state,
    latest: [...payload]
}

現在は機能しており、重複したデータは得られませんが、これを正しく行っていない、または正しく理解していないことが懸念されます。useEffect を使用し、useEffect フックで fetchLatest 関数を使用し、それを依存関係として渡すと、fetchLatestレンダリング サイクルごとに新しいオブジェクトとして関数が再作成されることを理解しています。私はすでに映画の配列をストアに持っているので、複製されたデータlatestでストアに追加するたびに新しいオブジェクトを再レンダリングしたくありません。state.movies.latest私は少なくともこれがそれがしていることだと信じています。

依存関係が変更されない限り、useCallbackこの新しいオブジェクトが作成されないようにするために、を使用する必要があるかもしれないと判断しました。fetchLatest

だから、私が確信していないのは、更新されたレデューサーを現在持っているように使用し、そのコンポーネントを再構築するときに毎回新しいオブジェクトとして fetchLatest 関数を再作成するために無限ループが実行されないようにするために、 useCallback を使用できるということですか?

また、 useCallback を使用する前に試し、レデューサーを元のように使用したため、 useCallback が実際に何をするのか理解できない可能性があります。コンポーネントを最初にマウントしたときにすでにストアにある最新の映画のみが必要です

このコンポーネントの私のコードは次のようになります

const Latest = ({ fetchLatest, latest }) => {
  useEffect(() => {
    fetchLatest();
  }, [fetchLatest]);

  return (
    <div className='genre-temp'>
      <h3 className='text-light'>Latest</h3>
      <div className='movies-container d-flex'>
        {latest.map((movie) => (
          <Movie
            key={movie.id}
            movieId={movie.id}
            image={movie.image}
            title={movie.title}
            description={movie.description}
          />
        ))}
      </div>
    </div>
  );
};

私が最初にやろうとしたことは、この useCallback を追加し、useEffect で handleFetching を呼び出して、依存関係として渡すことでした。

const handleFetching = useCallback(() => {
    fetchLatest()
}, []);

ただし、 useCallback を useEffect と組み合わせて使用​​しながら、レデューサーをそのまま使用しています...

return {
    ...state,
    latest: [...state, ...payload]
}

コンポーネントが再構築されるたびに実行されます。

4

1 に答える 1