我使用redux-toolkit-query进行API调用。
export const postApi = createApi({
reducerPath: 'posts',
baseQuery: query({
baseUrl: 'https://localhost:3000/posts/',
}),
endpoints: build => ({
getAllPosts: build.query({
query:() => ({ url: `/all`, method: METHOD_GET })
}),
getPost: build.query({
query: id => ({ url: `/${id}`, method: METHOD_GET })
}),
}),
});
API响应示例:
{
"user_name": "json",
"user_id": 2313,
"posts": [
{
"title": "Post a",
"post_id": 1
},
{
"title": "Post b",
"post_id": 2
},
]
}
现在getAllPosts
和getPost
方法都可以工作了,但是我所做的是从getAllPosts
开始迭代所有的帖子并渲染它们。我的目标是在每个帖子上都有一个刷新按钮,按下这个按钮只会刷新那个帖子的数据。这就是我遇到的困难。我不知道什么是最好的方法。
这将是一个很大的帮助,如果你们能指出我在正确的方向。不要求代码只是方法。
感谢您发送编修。
1条答案
按热度按时间j8yoct9x1#
我建议采取以下步骤:
1.通过
useGetAllPosts
获取getAllPosts
的帖子1.遍历结果项,创建
Post
组件,不管它看起来像什么,并将post的id
传递给它,或者传递给整个post对象,由您决定。1.在
Post
组件中调用useGetPost
,提供来自父PostsList组件的id props1.在Post组件中,使用处理程序定义一个“refresh”按钮,该按钮将调用
refetch
函数,该函数由useGetPost
挂钩提供:通过调用
refetch
,您将从API获得最新的数据,而忽略该高速缓存。还有其他处理标记的方法,如缓存无效,但我想这一种方法将适用于您的情况。