为什么在返回到选项卡时使用useQuery会导致我的组件重新渲染？

Question

我正在使用react-query库，查询了一下，发现useQuery可以让你的React组件重新渲染，因为它具有状态，但奇怪的是，当我切换标签时它会重新渲染（比如我去YouTube，然后回到我的应用程序，组件就会重新渲染）。但只有useQuery会出现这种情况，我不明白为什么。

编辑：当我点击控制台，然后再次单击应用程序时，也会发生这种情况。

代码非常简单：

const { data } = useQuery("pokemon", () =>
    axios("https://pokeapi.co/api/v2/pokemon/")
);
console.log(data);

这实际上正在发生。每次我回到我的应用程序，它都会再次记录数据。我不知道我错过了什么。

- GusDev

---

你正在使用 react-query 库吗？@GusDev - fortunee

哦，是的，我正在使用 react-query 库。 - GusDev

Answer 1

如果您正在使用react-query库，请考虑将refetchOnWindowFocus选项设置为false。

因此，您的代码应该像这样：

const { data } = useQuery("pokemon", () =>
    axios("https://pokeapi.co/api/v2/pokemon/"), 
    {
      refetchOnWindowFocus: false
    }
);
console.log(data);

你可以设置refetchInterval选项，以毫秒为单位，在特定时间间隔内重新获取数据。

- fortunee

---

那确实解决了问题，虽然我不知道为什么会发生这种情况，但是谢谢！ - GusDev

太好了！请继续点赞答案。@GusDev - fortunee