setLoading должен меняться на false, только когда данные уже получены.
А ещё вы key списку с репозиториями не задали, React ругается
import React, { useState, useEffect } from "react";
import Search from "./components/Search";
import ReactPaginate from "react-paginate";
import axios from "axios";
import "./styles.css";
const PER_PAGE = 4;
const App = () => {
const [user, setUser] = useState(null);
const [currentPage, setCurrentPage] = useState(0);
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
async function getUser(login) {
let result0;
result0 = (await axios.get(`https://api.github.com/users/${login}`)).data;
setUser(result0);
}
useEffect(() => {
if (user) {
setLoading(true);
fetch(
`//api.github.com/users/${user.login}/repos?page=${currentPage}&per_page=${PER_PAGE}`
)
.then((res) => res.json())
.then(setData).then(() => setLoading(false));
}
}, [user, currentPage]);
console.log(loading);
function handlePageClick({ selected: selectedPage }) {
setCurrentPage(selectedPage + 1);
}
/* const offset = currentPage * PER_PAGE;*/
const currentPageData = data
/* .slice(offset, offset + PER_PAGE)*/
.map((post, i) => <p key={i}>{post.full_name}</p>);
if (loading) {
return <div class="loader">Loading...</div>;
}
if (user === null) {
return (
<div>
<Search onSearch={getUser} />
<div id="start">
Start with searching
<br />a GitHub user
</div>
</div>
);
} else if (user) {
return (
<div>
<Search onSearch={getUser} />
<ReactPaginate
previousLabel={"← Previous"}
nextLabel={"Next →"}
pageCount={Math.ceil(user.public_repos / PER_PAGE)}
onPageChange={handlePageClick}
containerClassName={"paginatio"}
previousLinkClassName={"paginatio__link"}
nextLinkClassName={"paginatio__link"}
disabledClassName={"paginatio__link--disabled"}
activeClassName={"paginatio__link--active"}
/>
<div id="cpd">{currentPageData}</div>
<span id="repositories">Repositories({user.public_repos})</span>
</div>
);
}
};
export default App;
Простой
