当加载相同的路由时，React hook 不会调用“mount”，只调用 clear 方法答案

【问题标题】：React hook is not calling "mount" when same route is loaded, only clear method is called当加载相同的路由时，React hook 不会调用“mount”，只调用 clear 方法
【发布时间】：2021-09-24 05:42:34
【问题描述】：

我有这个钩子，它在安装组件时请求数据并在卸载时清除给定实体的存储：

export const useFetch = () => {
  const dispatch = useDispatch()
  const data = useSelector(entitySelector.data) // Selector which returns data from store
  const status = useSelector(entitySelector.status) // Selector which returns request status; idle, pending, fulfilled, rejected
  useEffect(() => {
    if (status === 'idle') {
      dispatch(entityActions.request(id))
    }
    return () => {
      dispatch(entityActions.reset())
    }
  }, [])
  return data
}

在组件中使用如下：

const data = useFetch()

在组件的初始加载时，一切都按预期工作，请求数据然后加载，返回的对象包含存储中的数据。卸载组件时调用重置操作并清除存储。

如果我切换到其他路线并返回，一切都会按预期工作。但是，如果我用相同的视图打开链接，或者只是保存文件并让 CRA 模块重新加载器刷新组件，则不会调用用于获取数据的 useEffect 部分并且不会呈现任何数据。

路由嵌套在其他组件中，如下所示：

<div>
  <ul>
    <li>
      <Link to="/foo">Foo</Link>
    </li>
    <li>
      <Link to="/bar">Bar</Link>
    </li>
  </ul>

  <Route path="/foo" component={Foo} />
  <Route path="/bar" component={Bar} />
</div>

我该如何解决这个问题，以便在再次加载相同的路由时调用 useEffect 获取片段？

【问题讨论】：

这个组件是否经过 HOC？
@deechris27 没有自定义 HOC
将状态变量添加到 useEffect 中的依赖数组是否可以解决问题？对于一个空的依赖数组，它本质上是在说，“只执行一次。”
我建议你在打开同一个视图的链接时看看stackoverflow.com/questions/38839510/…。
codesandbox.io/s/dreamy-leaf-keyyu?file=/src/App.js.. 这是一个不太详细的版本.. 我无法重现这两个问题... 请尝试重现并相应更新问题

标签： reactjs react-redux react-router react-hooks

【解决方案1】：

尝试将 entitySelector、status 和 id 添加到 useEffect 依赖项数组，并可能从此返回 fn 中删除 'dispatch(entityActions.reset())'

export const useFetch = () => {
  const dispatch = useDispatch()
  const data = useSelector(entitySelector.data) // Selector which returns data from store
  const status = useSelector(entitySelector.status) // Selector which returns request status; idle, pending, fulfilled, rejected
  useEffect(() => {
    if (status === 'idle') {
      dispatch(entityActions.request(id))
    }
    dispatch(entityActions.reset())
  }, [entitySelector, status, id])
  return data
}

【讨论】：