我在网上看到了一些解决方案，但我无法让它们发挥作用。
我有一个 React Native 应用，它从 API 加载数据。数据是分页的；每次我检索一个页面时，我都会收到该页面的结果以及下一页的 URL。因此，API 的典型响应采用以下格式（显然它比这更复杂一些，但这是要点）：
{
data: [
{ key: xx, title: 'Item 1' },
{ key: yy, title: 'Item 2' }
],
next: 'www/url/to/next/page/of/results'
}
我想在屏幕上显示每个项目，并且当用户滚动到屏幕底部时，应该加载下一组结果。我正在尝试FlatList为此使用。
到目前为止我已经（我还没有进行任何类型的错误检查或任何操作；只是试图先让它工作）：
const HomeScreen = () => {
const [next, setNext] = React.useState<string>(BASE_URL); // URL of first page of results
const [isLoading, setIsLoading] = React.useState<boolean>(true);
const [displayItems, setDisplayItems] = React.useState<Item[]|null>(null);
// Get next page of items
const fetchItems = async () => {
setIsLoading(true);
const response = await client(next, 'GET'); // Just calls axios
setDisplayItems((items) => items.concat(response.data));
setNext(response.next);
setIsLoading(false);
};
// Get items on first loading screen
React.useEffect(() => {
fetchItems();
}, [fetchItems]);
// Show items
if (isLoading) return <LoadingSpinner />
if (displayItems && displayItems.length === 0) return <Text>Nothing to show</Text>
return <FlatList
onEndReachedThreshold={0}
onEndReached={fetchItems}
data={displayItems}
renderItem={(i) => <ShowItem item={i}/>} />
};
export default HomeScreen;
问题在于它会标记一个错误，指出The 'fetchItems' function makes the dependencies of useEffect Hook change on every render.。它建议To fix this, wrap the definition of 'fetchItems' in its own useCallback() Hook.。
所以我把它包在一个useCallback()钩子里：
const fetchItems = React.useCallback(async () => {
setIsLoading(true);
const response = await client(next, 'GET'); // Just calls axios
setDisplayItems((items) => items.concat(response.data));
setNext(response.next);
setIsLoading(false);
}, [next]);
除非我添加，否则它根本无法运行fetchItems()，但此时它会无限地重新渲染。
我在网上找不到任何可行的方法。令人恼火的是，我记得几年前为另一个项目实施过这个，但我不记得它特别复杂！任何帮助都感激不尽。
