如何使用 react-query 将 useInfiniteQuery Hook 从一个屏幕传递到另一个屏幕答案

【问题标题】：how to pass useInfiniteQuery Hook from one screen to another using react-query如何使用 react-query 将 useInfiniteQuery Hook 从一个屏幕传递到另一个屏幕
【发布时间】：2023-01-07 03:38:56
【问题描述】：

我在 screenA 中有一个连续 3 列的 flatList，还有一个带有 flatList 的 screenB，它也以不同的方式显示 screenA 数据。一旦用户点击 screenA 中的项目，它就会导航到 screenB 并滚动到项目的索引。我正在使用react-query 来获取数据。我的问题是如何以真正的方式处理 fetchNextPage 。因为如果用户在 screenB 中滚动，下一页数据应该加载到两个屏幕中。将useInfiniteQuery返回的所有{data, fetchNextPage, hasNextPage, refetch}传递给screenB是否正确？或者还有其他解决方案？谢谢你的帮助

【问题讨论】：

标签： react-native react-query

【解决方案1】：

您可以将所有数据传递给 screenB 就可以了。但我的建议是，只有一个屏幕包含 screenA 组件和 screenB 组件，并根据 useState 挂钩显示您想要的组件。

const [screen,setScreen] = useState('screenA');

每次你需要显示屏幕时，你将屏幕设置为屏幕

setScreen('screenB');

在你的 jsx 中：

screen === 'screenA' ? (ScreenAcomponent) : (ScreenBcomponent)

【讨论】：