React+Mobx组件因状态变更触发无限渲染循环问题求助

问题根源 #

你的useEffect没有设置依赖数组，导致每次组件重渲染都会触发checkAuth()；而checkAuth()内部修改了appStore和userStore的可观察状态，又会触发组件重新渲染，最终形成无限循环。

修复方案 #

给useEffect添加空依赖数组，让checkAuth()只在组件挂载时执行一次：

const AppRouter: FC = () => {
  const controller = useContext(ControllerContext)

  useEffect(() => {
    controller.checkAuth()
  }, []) // 空依赖数组：仅组件首次挂载时执行

  if (controller.appStore.getIsLoading) {
    console.log('loading');
    return (<Loading />);
  }

  else return (
    <div>routes</div>
    // 原路由代码保持不变
  )
};

export default observer(AppRouter);

额外说明 #

1. 如果后续需要在特定状态变化时重新校验授权（比如用户手动触发登录/登出），可以把对应的状态加入依赖数组，例如：

   useEffect(() => {
     controller.checkAuth()
   }, [controller.appStore.getIsAuth]) // 当授权状态变化时重新校验
   

2. 确保controller是稳定的引用（通过Context提供的实例通常是稳定的），如果controller会频繁变化，需要将其加入依赖数组，或者用useCallback包裹相关方法避免不必要的重执行。

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