Один и тот же компонент отрисовывается дважды, хотя в коде используется один раз. Наверное проблема в хреново написаном useEffect, но не могу понять в чем именно ошибка.
import React from "react";
import Pagination from "../Pagination/Pagination";
import Preloader from "../../common/Preloader";
import { useState, useEffect } from "react";
import axios from "axios";
const MovieList = () => {
const [movies, setMovies] = useState([
{
id: 1,
title: 'aboba',
slug: 'aboba-2022',
year: 2022,
synopsis: 'just Aboba',
background_image: '',
cover_image: '',
}
]);
const [pageSize, setPageSize] = useState(0)
const [currentPage, setCurrentPage] = useState(1);
const [totalCount, setTotalCount] = useState(0);
const [isFetching, setIsFetching] = useState(false);
const src = `https://yts.mx/api/v2/list_movies.json?page=${currentPage}`;
useEffect(()=>{
axios
.get(src)
.then(data => {
console.log(data.data.data);
setTotalCount(data.data.data.movie_count);
setPageSize(data.data.data.limit)
setMovies(data.data.data.movies)
setIsFetching(true);
})
}, [])
console.log(isFetching);
console.log(currentPage)
return (
<div>
{isFetching && <Pagination
currentPage={currentPage}
totalCount={totalCount}
pageSize={pageSize}
onPageChange={page => setCurrentPage(page)}
/>}
</div>
);
}
export default MovieList;