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

w3nuxt5m 于 2023-01-09 发布在 React

关注(0)|答案(1)|浏览(145)

我有一个flatList，在screenA中有3列，在screenB中也有一个flatList，它也以不同的方式显示screenA的数据。一旦用户单击screenA中的一个项目，它就会导航到screenB并滚动到该项目的索引。我使用react-query来获取数据。我的问题是如何以真正的方式处理fetchNextPage。因为如果用户在screenB中滚动，则下一页数据应该在两个屏幕中加载。将从useInfiniteQuery返回的所有{data, fetchNextPage, hasNextPage, refetch}传递到screenB是否正确？或者有其他解决方案？简单地说，类似于instagram的个人资料屏幕。正如你所看到的，在主配置文件屏幕下的一个选项卡用户点击项目，它的导航到第二个图像。所有的数据加载在第二个屏幕时，用户滚动也加载在主配置文件选项卡。

谢谢你的帮助

react-native

来源：https://stackoverflow.com/questions/75035172/how-to-pass-useinfinitequery-hook-from-one-screen-to-another-using-react-query

1条答案

按热度按时间

xfb7svmp1#

你可以把所有的数据传递给screenB，这没关系。但是我建议，只有一个screenA组件和screenB组件，并且基于useState钩子显示你想要的组件。

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

每次需要显示screenB时，都将Screen设置为screenB，将itemIndex设置为项索引

setScreen('screenB');
setItemIndex(indexOfSelectedItem);

当您想要返回屏幕A时：

setScreen('screenA');
setItemIndex(null);

在您jsx：

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

您的屏幕B需要itemIndex才能滚动到它

赞(0）回复(0）举报 2023-01-09

我来回答

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

1条答案

相关问题

热门标签

最新问答