Question

import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchMovies } from "../../feautures/movies/moviesSlice";

import { BiLeftArrow, BiRightArrow } from "react-icons/bi";

import Card from "../Card/Card";
import Slider from "../UI/Slider/Slider";
import Navigation from "../Navigations/Navigation";

import "./MoviesList.scss";
import request from "../../requests";

const MoviesList = () => {
  const dispatch = useDispatch();

  // Current Page
  const [currentPage, setCurrentPage] = useState(1);

  // Handle movies states
  const moviesStatus = useSelector((state) => state.movies.status);
  const moviesState = useSelector((state) => state.movies.movies);
  const moviesError = useSelector((state) => state.movies.error);
  const moviesHeading = useSelector((state) => state.movies.moviesHeading); // It's for pagination

  // Handle header input
  const inputValue = useSelector((state) => state.movies.inputValue);


  // Movies according input values
  const filteredMovie = moviesState.filter((movie) =>
    movie.original_title.toLowerCase().includes(inputValue)
  );

  // Handle page number
  const handlePageNumber = (nexPage) => {
    setCurrentPage(page => Math.max(1, Math.min(page + nexPage, 10)))
   
  };

  // Handle pagination
  useEffect(() => {
    console.log("sayfa")
    if (moviesHeading === "POPULAR") {
      dispatch(fetchMovies(request.fetchPopular(currentPage)));
    } else if (moviesHeading === "NOW PLAYING") {
      dispatch(fetchMovies(request.fetchPopular(currentPage)));
    } else if (moviesHeading === "UP COMING") {
      dispatch(fetchMovies(request.fetchUpComing(currentPage)));
    } 
    
  }, [currentPage, dispatch, moviesHeading]);

  // Reset current page number
  const resetPageNumber = () => {
    setCurrentPage(1);
  }

  useEffect(() => {
    resetPageNumber()
  },[moviesHeading])


 

  useEffect(() => {
    if (moviesStatus === "idle") {
      dispatch(fetchMovies(request.fetchPopular()));
    }
  }, [dispatch, moviesStatus]);

  let content;

  if (moviesStatus === "loading") {
    <div>selamlar</div>;
  } else if (moviesStatus === "succeeced") {
    content = (
      <div className="movies__container">
        <BiLeftArrow
          className="movies__arrow movies__arrow--left"
          onClick={() => {
            handlePageNumber(-1)
          }}
        />
        {filteredMovie.map((movie) => {
          return <Card movie={movie} key={movie.id} />;
        })}
        <BiRightArrow
          className="movies__arrow movies__arrow--right"
          onClick={() => {
            handlePageNumber(1)
          }}
        />
      </div>
    );
  } else if (moviesStatus === "failed") {
    content = <div>{moviesError}</div>;
  }

  return (
    <div className="movies">
      <Slider />
      <div className="movies__heading">{moviesHeading}</div>
      <Navigation />
      {content}
    </div>
  );
};

export default MoviesList

大家好。我尝试使用 react-redux 制作电影网站。但是当我单击按钮（流行或即将到来或正在播放）或向左或向右箭头单击以更改页面时，我只想更改{ {1}} 容器，但所有组件都重新渲染。我该怎么做才能防止这种情况发生？例如，当我点击向右箭头按钮时，我不想 .movies__container 组件重新渲染。如果您在我的代码中看到一些荒谬的东西，请告诉我，以便我可以修复它。

Answer 1

在 React 中，如果父级重新渲染子级也会渲染。为了防止孩子重新渲染，请对孩子使用 React.memo。这将使孩子们只有在修改道具时才能重新渲染。

我该如何防止所有组件重新渲染？

1 个答案: