在NavLink回调中调用setState触发不良setState警告问题

问题原因 #

你收到的警告翻译成中文是：

警告：无法在渲染另一个组件（NavLink）时更新组件。要定位NavLink内部错误的setState()调用，请按照堆栈跟踪说明进行操作。

问题核心是在NavLink的渲染回调函数中直接调用父组件的setIsTabNavigating——React禁止在组件渲染阶段修改其他组件的状态，这种操作会打破渲染流程的稳定性。

解决方案 #

将状态更新逻辑从渲染回调移到副作用钩子中，通过Tabs组件的本地状态中转，避免在渲染期间直接触发父组件状态更新。

修改后的Tabs组件代码 #

import { NavLink } from "@remix-run/react";
import { useEffect, useState } from "react";

const Tabs = ({ setIsTabNavigating }) => {
  // 本地状态追踪当前处于pending状态的标签页链接
  const [pendingTab, setPendingTab] = useState(null);

  // 监听pendingTab变化，再触发父组件状态更新
  useEffect(() => {
    if (pendingTab) {
      setIsTabNavigating(true);
    }
  }, [pendingTab, setIsTabNavigating]);

  return (
    <>
      {tabItems.map((tab) => (
        <div key={tab.link}>
          <NavLink to={tab.link}>
            {({ isPending }) => {
              // 仅在isPending状态变化时更新本地状态
              if (isPending) {
                setPendingTab(tab.link);
              } else if (pendingTab === tab.link) {
                setPendingTab(null);
              }
              return <span>{tab.title}</span>;
            }}
          </NavLink>
        </div>
      ))}
    </>
  );
};

export default Tabs;

父组件代码保持不变 #

父组件通过useNavigation监听导航状态回到idle时关闭加载动画的逻辑无需修改，依然可以正常工作。

方案说明 #

1. 在Tabs组件内部新增pendingTab本地状态，仅用来记录当前处于pending状态的标签页链接，避免直接在渲染回调中操作父组件状态
2. 通过useEffect监听pendingTab的变化，当有标签页进入pending状态时，再调用父组件的setIsTabNavigating触发加载动画显示
3. 这种方式符合React的渲染规则，彻底消除了"渲染时更新组件"的警告

内容的提问来源于stack exchange，提问作者cyclonejet