主页 / coding / 问题 / 78786955
Accepted
Ofir
Asked: 2024-07-24 15:39:36 +0800 CST

React 查询-强制查询新对象 ID 的新数据

  • 772

我正在使用 React 查询根据其 ID 获取博客文章的数据。当我访问某个博客文章然后导航到另一个时，它首先向我显示上一个博客文章的数据，然后使用新信息重新呈现页面。似乎首先从缓存中获取数据，然后刷新。

代码：

const BlogPost = () => {
// Getting the blogPostId from the Url
  const { blogPostId } = useParams();

// Querying the blogPostData from the server using its id. (here is the problem probably...)
  const { data: blogPostData } = useQuery<BlogPostType>({
    queryKey: ["getBlogPost"],
    queryFn: () => apiClient.getPostById(blogPostId),
  });

  return (
    <div>
      <h1>{blogPostData?.title}</h1>
      <hr/>
      <p>{blogPostData?.description}</p>
    </div>
  );
};

有什么解决办法吗？（我希望新数据能立即出现）

reactjs

1 个回答

  1. Best Answer

    博客文章 ID 必须是密钥的一部分。

    const { data: blogPostData } = useQuery<BlogPostType>({
  queryKey: ["getBlogPost", blogPostId],
  queryFn: () => apiClient.getPostById(blogPostId),
});

    据记载：

    当查询需要更多信息来唯一地描述其数据时，可以使用带有字符串和任意数量的可序列化对象的数组来描述它。 [...] 通常传递 ID、索引或其他原语来唯一地标识项目：useQuery({ queryKey: ['todo', 5], ... })

    同样的模式适用于，实际上与您给予的swr有点类似。depsuseEffect

    • 2

相关问题