Я работаю над проектом, который использует API серверной части для извлечения данных и отображения на интерфейсе с помощью реакции. Я не специалист по реагированию, но учусь, работая над проектом. Последние 3 месяца я застрял на одной проблеме и все еще не мог понять, как ее решить. Это формат данных, которые я получаю
{
"data": [],
"meta": {
"page": 1,
"total": 382,
"per_page": 10,
"total_pages": 39,
"search_query": {},
"message": ""
}
}
Вот как выглядит URL-адрес
const url = `${
CONSTANTS.BASE_URL
}/jobs?page=${counter}&position=${searchField.toLowerCase()}&city=${locationField.toLowerCase()}&job_type=${jobType}`;
Я использую useHistory из react-router-dom для отображения динамики c URL-адрес в браузере.
import { useHistory } from 'react-router-dom';
let jobHistory = useHistory();
Вот как я вставил URL-адрес в браузер, чтобы посмотреть его динамически c
useEffect(() => {
searchJobs(setIsLoading, setData, setMeta, url);
setToggleSearch(false);
jobHistory.push(
`?page=${counter}${searchField ? `&position=${searchField.toLowerCase()}` : ''}${
locationField ? `&city=${locationField.toLowerCase()}` : ''
}${jobType ? `&job_type=${jobType}` : ''}`
);
}, [counter, jobType, toggleSearch]);
Вот как searchJobs реализуется
export default async (setIsLoading, setData, setMeta, url) => {
try {
setIsLoading(true);
const res = await fetchData(url);
setData(res.data);
setMeta(res.meta);
setIsLoading(false);
} catch (error) {
console.error(error);
}
};
У меня есть компонент нумерации страниц, который я реализовал с помощью Semanti c UI response . Вот как я контролировал значение counter
{meta && meta.total > 0 && <CustomPagination meta={meta} setCounter={setCounter} />}
, передав его внутри CustomPagination Компонента, который выглядит следующим образом.
const CustomPagination = ({ meta, setCounter }) => {
const pageChange = (e, { activePage }) => {
setCounter(activePage);
};
return (
<>
<div className="pagination">
{meta && meta.total_pages && meta.total_pages > 1 && (
<Pagination
defaultActivePage={meta.page}
onPageChange={pageChange}
firstItem={false}
lastItem={false}
prevItem={{ content: <Icon name="angle left" />, icon: true }}
nextItem={{ content: <Icon name="angle right" />, icon: true }}
totalPages={meta.total_pages}
/>
)}
</div>
</>
);
};
export default CustomPagination;
Вот и проблема:
Разбивка на страницы работает очень хорошо, когда я просто нажимаю цифры разбивки на страницы, и она отображает правильное значение в URL-адресе, но когда я нажимаю кнопку «Назад», URL-адрес меняет значение, но вывод на страница остается прежней. Эта проблема возникает при нажатии на обычную разбивку на страницы или при поиске по ключевым словам, я имею в виду в обоих случаях .
Второй случай, если I go - page number 6 при нажатии на разбивку на страницы отображается результат 10 заданий на этой странице, а URL-адрес выглядит примерно так ?page=6, и после того, как я нажимаю на отдельные задания /jobs/23499 и пытаюсь вернуться с помощью кнопки возврата в браузере, URL-адрес снова берет меня на 1-ю страницу ?page=1.
Третий случай, как пользователь, я хочу go на страницу 8, просто переименовав номер страницы в URL-адресе, если я попытаюсь сделать Итак, он снова перенаправляет меня на ?page=1
На мой взгляд, все проблемы вызваны неправильным способом обработки значения counter. Я, будучи новичком, не мог понять, как это можно правильно реализовать. На всякий случай я разместил весь свой код в этой gist , или вы можете увидеть проблему вживую здесь , просто нужно сначала зарегистрироваться. Любая помощь будет более чем оценена. Заранее спасибо всем разработчикам.