reactjs - 尽管来自 ESLint(react-hooks/exhaustive-deps) 发出警告，但依赖数组中的 React.useEffect : Component re-renders with window. location.pathname

Question

我有一个左侧菜单，其中包含需要根据当前 URL 路径选择/取消选择的子选项。在寻找解决方案的过程中，我发现以下代码给出了如下所示的 ESLint 错误:

useEffect(() => {
    if (window.location.pathname === "/events/list") {
      setManageEventsOpen(true);
      setSelectedListItem(LIST_SELECTED);
    }
    if (window.location.pathname === "/events/map") {
      setManageEventsOpen(true);
      setSelectedListItem(MAP_SELECTED);
    }
    if (window.location.pathname === "/events/calendar") {
      setManageEventsOpen(true);
      setSelectedListItem(CALENDAR_SELECTED);
    }
  }, [window.location.pathname]);

React Hook useEffect has an unnecessary dependency: 'window.location.pathname'. 
Either exclude it or remove the dependency array. 
Outer scope values like 'window.location.pathname' aren't valid 
dependencies because mutating them doesn't re-render 
the component.eslint(react-hooks/exhaustive-deps)

但是，当我运行此代码时，我注意到当路径更改时组件会重新渲染。我认为这只是因为在手动更改 URL 并刷新页面时整个应用程序正在重新加载，但即使从另一个组件使用 History.push('/events/list') 也会导致重新渲染。

我想知道，这个警告是否不正确？有人看到不同的结果吗？

注意:我在我的应用程序中对此有更好的解决方案，但我仍然对警告感到好奇。

Answer 1

当路径更改时您的应用会重新呈现这一事实并不意味着警告不正确。这意味着您的 useEffect 逻辑依赖于不相关的逻辑，这会令人困惑并且容易出现错误。

相反，您应该显式监听/订阅对 location.pathname 的更改 - 以便您的组件使用更新后的值重新呈现。鉴于您使用 React Router，请查看他们的 useLocation钩子(Hook):

const location = useLocation();
useEffect(() => {
  if(location.pathname === "/events/list") {
...