При переключении между «фильмами» и «сериалами» предыдущий контент не заменяется, а неверные карты показаны ⇐ Javascript

[Anonymous]

Проблема, необходимо очистить сеть < /p>

Код: Выделить всё

•   When I open the /films page, a request is made to films.json and movie cards are displayed.
•   As I scroll down, more films are loaded in batches of 20 — works fine so far.
•   Then I navigate to /serials, a request to serials.json is made and serial cards are shown — also works fine.
•   But when I go back to /films, a new request is correctly made to films.json, but the serial cards from the previous view are still on the page, instead of being replaced with films.
< /code>
Таким образом, изменение пути и новый запрос запускается, но старые карты (из /сериалы) остаются. < /p>
Ожидаемое поведение: при переключении маршрутов текущие карты должны быть очищены, и только новый контент должен быть показан. SessionStorage < /li>
< /ul>
Любые идеи о том, что может пойти не так?export default function MoviesList({
mainpage,
referer,
list = [],
filterData,
catalogData,
searchParams,
priorityArray,
query = undefined,
setNewData = null,
sessionStorageFilms,
sessionStorageSerials,
maximumAgeLevel,
isHistoryCard
}) {
const [data, setData] = useState(list);
const [reset, setReset] = useState(false);
const [asPath, setAsPath] = useState(searchParams?.categoryAlias);
const skipNumber =
asPath === «films»
? sessionStorageFilms?.length
: asPath === «serials»
? sessionStorageSerials?.length
: +process.env.LIMIT_SCROLL_ITEMS_PER_PAGE;

if (asPath !== searchParams?.categoryAlias) {
// when the page changes, a command to reset skip is sent
setAsPath(searchParams.categoryAlias);
}

const { result, loading } = infiniteScrollMovieList(
mainpage,
catalogData,
searchParams,
filterData,
reset,
query,
skipNumber, //to load the number of subsequent films stored in sessionStorage
maximumAgeLevel,
sessionStorageFilms,
sessionStorageSerials
);

useEffect(() => {
if (
result?.items?.length &&
data?.length &&
result.items[result?.items?.length - 1].name !== data[data.length - 1].name
) {
const newData = [...data, ...result?.items];

if (
setNewData === null &&
sessionStorageSerials?.[20]?.name !== result?.items[0].name &&
sessionStorageFilms?.[20]?.name !== result?.items[0].name
) {
setData(newData);

if (asPath === «films») {
sessionStorage.setItem(«films», JSON.stringify(newData));
} else if (asPath === «serials») {
sessionStorage.setItem(«serials», JSON.stringify(newData));
}
} else if (
setNewData !== null &&
!Boolean(
data.find(item => item.name === result.items[result?.items?.length - 1].name)
)
) {
setNewData(newData);
}
}
}, [result, sessionStorageSerials, sessionStorageFilms]);

useEffect(() => {
// retrieve films from sessionStorage, if they are there
if (asPath === «films») {
list.length > 0 && setData(sessionStorageFilms?.length > 0 ? sessionStorageFilms : list);
} else if (asPath === «serials») {
list.length > 0 && setData(sessionStorageSerials?.length > 0 ? sessionStorageSerials : list);
} else {
setData(list);
}

if (setNewData === null) {
setReset(true);
setTimeout(() => {
setReset(false);
}, 1000);
}
}, [asPath, filterData, list, sessionStorageSerials, sessionStorageFilms, setNewData]);

Спасибо

Подробнее здесь: https://stackoverflow.com/questions/796 ... replaced-a