React Router与ZustandJS初始调用触发两次渲染的问题排查

核心思路 #

把Fetch逻辑封装到Zustand的Store Action中，让Store自行判断是否需要执行请求——只有当目标路径片段发生实际变化时，才发起请求并更新状态，从根源避免重复调用。

具体实现 #

1. 改造Zustand Store，添加带判断逻辑的Action

import { create } from 'zustand';

const useStore = create((set, get) => ({
  currentPathSegment: '',
  fetchedData: null,
  // 封装Fetch逻辑的Action
  fetchDataForSegment: async (targetSegment) => {
    // 先判断当前存储的路径片段是否和目标一致，一致则直接返回
    if (get().currentPathSegment === targetSegment) return;

    try {
      // 发起请求（替换成你的实际接口地址）
      const response = await fetch(`/api/data/${targetSegment}`);
      const data = await response.json();
      
      // 请求成功后更新Store状态
      set({
        currentPathSegment: targetSegment,
        fetchedData: data
      });
    } catch (error) {
      console.error('数据请求失败:', error);
    }
  }
}));

2. 在组件中调用Store Action

在路由组件中，通过React Router的useParams或useLocation获取路径片段，然后在useEffect中调用Store的Action：

import { useParams } from 'react-router-dom';
import { useEffect } from 'react';
import useStore from './path-to-your-store';

function TargetComponent() {
  // 假设路由规则为 /Test/:segment/，这里获取segment参数
  const { segment } = useParams();
  const fetchDataForSegment = useStore(state => state.fetchDataForSegment);

  useEffect(() => {
    fetchDataForSegment(segment);
  }, [segment, fetchDataForSegment]);

  // 渲染逻辑
  const { fetchedData } = useStore(state => ({ fetchedData: state.fetchedData }));
  return (
    <div>
      {fetchedData ? <div>{JSON.stringify(fetchedData)}</div> : <div>加载中...</div>}
    </div>
  );
}

为什么这个方案有效？ #

• 即使组件因为React 18 Strict Mode（开发环境）或路由重新挂载导致多次执行useEffect，Store内部的判断逻辑会拦截重复请求——第一次调用后currentPathSegment已经更新为目标值，后续调用会直接返回，不会重复发起Fetch。
• 不需要使用useRef记录前值，状态判断逻辑完全由Store管理，代码更简洁且符合状态管理的职责划分。

额外提示 #

如果是开发环境下Strict Mode导致的组件两次挂载，这是React的刻意行为（用于检测副作用问题），生产环境不会出现该现象。上述方案同时兼容开发和生产环境，无需额外配置。

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