React useEffect 空依赖场景下仅在页面跳转返回后才执行的问题排查

• 你的代码存在两个核心错误，直接导致了“跳转往返后才显示内容”的异常表现
• 第一个错误是完全用错了useEffect的适用场景，且没有把生成的卡片内容和React的响应式渲染系统绑定：
  你在useEffect回调里手动循环生成、赋值的cards变量，既没有通过useState声明为响应式状态，也没有用useMemo做渲染层的记忆化计算，只是一个没有被React跟踪的普通变量。
  这里要明确React的标准执行顺序：组件首次渲染时，会先跑完整个组件函数、计算出要输出的UI树、挂载到DOM上，等整个挂载流程走完之后，才会执行空依赖数组的useEffect回调。也就是说你在useEffect里循环生成卡片的逻辑，跑的时候首次渲染早就结束了，因为没有触发重新渲染的机制，React根本不会把你塞到cards数组里的卡片渲染到页面上。
• 第二个错误是变量未声明直接赋值，导致全局作用域污染：
  你代码里的cards、循环用的i都没有加let/const声明，这些变量会自动挂到全局window对象上，组件卸载的时候根本不会被清理。

异常表现的完整触发流程：

1. 第一次进入目标路由页面：组件首次渲染时读取的cards是初始空值，等渲染完成后才执行useEffect的循环逻辑把卡片元素塞到全局的cards数组里，但此时React不知道这个全局变量变了，不会触发重渲染，所以页面全程是空的
2. 点击Link跳转到其他页面：当前路由对应的组件被React Router卸载，但全局cards数组里残留的卡片元素完全不会被清除
3. 从其他页面切回原页面：组件重新初始化执行函数体，此时读取的cards直接拿到了上一次残留的、已经塞好所有卡片元素的全局数组，组件直接把这些内容渲染到页面上，看起来就像循环逻辑“终于执行了”

• 生成页面要展示的卡片内容是纯粹的渲染计算逻辑，完全不需要放到useEffect里——你本来就是要把Card组件渲染到页面上，属于组件渲染输出的一部分，直接在组件函数体里写逻辑即可。而且你使用的CardData是静态引入的本地dummy数据，在模块加载阶段就已经存在于内存中，没有任何异步获取的延迟，根本不需要靠副作用触发处理。最简洁的写法就是用数组的map方法直接生成节点：
  {CardData.map(item => <Card info={item} key={item.title} />)}
• 如果有特殊场景需要提前攒出cards数组，要么在组件函数体内用let声明变量后循环填充，要么对计算过程做性能优化时用useMemo包裹，让React能正确跟踪这个值的变化
• 所有组件内部使用的局部变量，必须用let/const明确声明，避免变量逃逸到全局作用域引发各种状态残留的诡异问题

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