exhaustive-deps 无限循环，函数依赖于组件状态

Question

给出下面的例子

const SettingsLayout = () => {
  const [tabs, setTabs] = useState(SettingsNavigation);
  const router = useRouter();

  const updateActiveTab = useCallback(
    (pathname) => {
      setTabs(
        tabs.map((tab: Tab) => ({
          ...tab,
          current: tab.href === pathname,
        }))
      );
    },
    [tabs]
  );

  useEffect(() => {
    updateActiveTab(router.pathname);
  }, [router.pathname]);
  // exhaustive-deps wants me to add updateActiveTab to the dependency array
  // but adding it will cause an infinite render loop
  // Flux:
  //   -> useEffect will change tabs
  //   -> tabs will change updateActiveTab
  //   -> updateActiveTab will execute useEffect

  return (...)
}

到目前为止我还没有找到除了禁用 exhaustive-deps 之外的解决方案，我知道你不应该这样做。

如何仅在 router.pathname 更改时执行 updateActiveTab？

Answer 1

看看这个！

const SettingsLayout = () => {
  const allTabs = SettingsNavigation;
  const [tabs, setTabs] = useState();
  const router = useRouter();

  const updateActiveTab = useCallback(
    (pathname) => {
      setTabs(
        allTabs.map((tab: Tab) => ({
          ...tab,
          current: tab.href === pathname,
        }))
      );
    },
    [allTabs]
  );

  useEffect(() => {
    updateActiveTab(router.pathname);
  }, [router.pathname]);

  return (...)
}

exhaustive-deps 无限循环，函数依赖于组件状态

exhaustive-deps infinite loop with function dependant on component state

reactjs

non-exhaustive-patterns