已經使用 Edamam API 為我的食譜應用程式實作了無限滾動功能，但我有這個問題：
當我到達頁面底部并開始獲取下一頁時，該組件會進行全面重繪 ，它會在之后顯示每個頁面的所有專案。
我想要的是，當我到達底部時，它開始獲取（在底部顯示我的微調器和東西）并在底部呈現下一頁，而根本不重繪 整個頁面。
這是我的代碼：
const RecipesGrid = ({ query }) => {
const getRecipes = async (pageParam) => {
try {
const path = pageParam
? pageParam
: `https://api.edamam.com/api/recipes/v2?q=${query}&app_id=${process.env.REACT_APP_APP_ID}&app_key=${process.env.REACT_APP_API_KEY}&type=public`;
const response = await axios.get(path);
return response.data;
} catch (error) {
console.log(error);
}
};
useEffect(() => {
const onScroll = (event) => {
const { scrollHeight, scrollTop, clientHeight } =
event.target.scrollingElement;
if (scrollHeight - scrollTop <= clientHeight * 1.2) {
fetchNextPage();
}
};
document.addEventListener("scroll", onScroll);
return () => document.removeEventListener("scroll", onScroll);
// eslint-disable-next-line
}, []);
const {
data,
isFetching,
isFetchingNextPage,
status,
hasNextPage,
fetchNextPage,
} = useInfiniteQuery(
["recipes", query],
({ pageParam = "" }) => getRecipes(pageParam),
{
getNextPageParam: (lastPage) =>
lastPage._links.next ? lastPage._links.next.href : undefined,
}
);
if (isFetching || status === "loading") {
return <Spinner />;
}
if (status === "error") {
return <div>Whoops! something went wrong...Please, try again</div>;
}
return (
<div className={styles.Recipes}>
{data?.pages.map((item, index) => (
<React.Fragment key={index}>
{item.hits.map((recipe) => (
<Recipe recipe={recipe} key={recipe.recipe.uri} />
))}
{item.hits.length === 0 ? (
<Empty message="No results found!" />
) : null}
{!hasNextPage && item.hits.length !== 0 && (
<Empty message="No more recipes!" />
)}
</React.Fragment>
))}
{isFetchingNextPage && <Spinner />}
</div>
);
};
export default RecipesGrid;
uj5u.com熱心網友回復：
我認為您正在卸載整個串列，因為您只在此處渲染加載微調器：
if (isFetching || status === "loading") {
return <Spinner />;
}
isFething每當請求正在進行中時始終為真。當您獲取下一頁時也是如此，因此您可以提前回傳并洗掉您的串列。isFetching從 if 陳述句中洗掉應該可以解決它，因為您無論如何都可以通過以下方式顯示后臺加載指示器：
{isFetchingNextPage && <Spinner />}
此外，您的錯誤處理將不起作用，因為您通過捕獲錯誤進行記錄而不是重新拋出它們將錯誤轉換為已解決的承諾：
} catch (error) {
console.log(error);
}
請使用onError回呼來處理類似的事情。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338114.html
標籤：javascript 反应 反应原生 无限滚动 反应查询