在 NavLink 回调中包装 setState 会给出错误的 setState 警告

Question

我有一个

Tabs

组件，其中有一堆

NavLink

。我试图显示一个基于父组件上

NavLink

的

isPending

属性的加载微调器。因此，当

NavLink

组件的

Tabs

中有导航时，我会显示微调器。我仅从

NavLink

组件触发显示旋转器。我正在使用

navigation

将微调器从父级关闭。

父组件类似于：

import { useNavigation} from "@remix-run/react";

const [isTabNavigating, setIsTabNavigating] = useState(false);
const navigation = useNavigation();

useEffect(() => {
  if (navigation.state === "idle") setIsTabNavigating(false);
  }, [navigation.state]
);

return (
  <>
    <Tabs setIsTabNavigating={setIsTabNavigating} />
    { isTabNavigating ? <Spinner /> : <Outlet /> }
  </>
);

和选项卡组件：

<>
  {tabItems.map((tab) => (
    <div>
       <NavLink to={tab.link}>
       {
         ({ isPending }) => {
           if (isPending) setIsTabNavigating(true);
           return <span>{tab.title}</span>
         }
       }
       </NavLink>
    </div>
  }
</>

我收到此警告：

Warning: Cannot update a component while rendering a different component (NavLink). To locate the bad setState() call inside NavLink, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

Answer 1

您直接在

setIsTabNavigating(true)

的渲染函数内调用

NavLink

。它违反了 React 的渲染过程，该过程期望渲染函数是纯粹的并且没有副作用。在你的情况下，我认为检查父组件中导航的加载状态就足够了：

const navigation = useNavigation();
const isNavigating = navigation.state === 'loading';

return (
  <>
    <Tabs />
    {isNavigating ? <Spinner /> : <Outlet />}
  </>
);