Next.js - 访问同一路由时，useEffect 未触发答案

【问题标题】：Next.js - When accessing the same route, useEffect is not firingNext.js - 访问同一路由时，useEffect 未触发
【发布时间】：2020-11-02 22:05:30
【问题描述】：

我在 Next.js v10 中使用 useEffect 实现了在访问屏幕时运行的 API。

代码简单写成如下。

...
const fetchAPI = async () => {
  try {
    await axios.get({ .... })
  } catch (e) {
    console.error(e)
  }
}

React.useEffect(() => {
  fetchAPI()
}, [])
...

第一次访问时，useEffect的API运行正常。

但是，如果我转到另一个屏幕然后再次访问该屏幕，useEffect 不起作用。

其他屏幕上的useEffect也是如此。

我可以在每次访问屏幕时运行 useEffect 吗？

目前，依赖项设置为[]，但如果完全删除[]，应用程序将停止。

哪种解决方案对我有帮助？

无论我怎么看，我都找不到这样的问题。

我解决了这个问题并在下面写了答案。

【问题讨论】：

听起来屏幕组件在导航之间没有被卸载。您的 useEffect 只会在挂载时运行。访问新屏幕时，导航库不一定要卸载组件。显示您的导航组件。
这真的取决于你的导航是如何工作的，如果它隐藏了组件 - 你的 useEffect 将不起作用，如果它重新渲染组件 - 它会起作用。如果它以某种方式隐藏它，你应该有一些道具或状态，例如“hidden：true”，这样你就可以使用它
@Adam 哦，这是我的错。这个问题是“缓存”。以前，如果缓存中有数据，则无需请求新服务器即可显示数据。我意识到这一点并将其更改为无条件地发出网络请求，而不管缓存如何。
@NikitaChayka 我只能提到一个人，所以我再次写下来。现在它工作正常。谢谢！

标签： javascript reactjs next.js

【解决方案1】：

我解决了这个问题并在下面写了答案。

问题出现在cache。

之前实现的方法，如果缓存中有数据，就不会请求新的服务器，剩下的数据就照原样使用。

因此，即使您重新访问该页面，也会显示相同的数据，并且网络选项卡中没有任何变化。

So I realized that and changed it to make a network request every time a page is accessed, regardless of the cache.

而且它工作正常。

抱歉问了这么愚蠢的问题……

谢谢大家的回答！

【讨论】：

能否详细说明changed it to make a network request every time