По аналогии с этим вариантом https://codesandbox.io/s/bold-field-3eqql?file=/src/App.js попытался вывести свою пагинацию на основе react-paginate: https://codesandbox.io/s/eager-oskar-471xm?file=/src/App.js Но репозитории и номера страниц не отображаются. Что неверно? P.S. Очень желательно вынести пагинацию в отдельный компонент.
1 ответ
У вас данные user появляются только при поиске. Если ввести корректные данные в поиск и нажать Enter всё будет работать. Возможно вы хотите искать без onSubmit? Тогда необходимо делать изменения на onChange инпута и убрать форму.
const [user, setUser] = useState(null); // здесь user по умолчанию null
async function getUser(login) {
let result0;
result0 = (await axios.get(`https://api.github.com/users/${login}`)).data;
setUser(result0);
}
useEffect(() => {
if (user) { // user === null поэтому дальше он не идёт.
fetch(
`//api.github.com/users/${user.login}/repos?page=${currentPage}&per_page=${PER_PAGE}`
)
.then((res) => res.json())
.then(setData);
}
}, [user, currentPage]);
пример Обязательно после ввода нажать Enter. Такова логика вашего компонента сейчас