Customer History API重复调用两次的原因与解决方法

问题根源分析 #

1. React Strict Mode 双重执行：开发环境下，React StrictMode会刻意重复执行useEffect、组件渲染等操作，用于检测潜在副作用问题，这是开发环境中API调用两次的常见诱因。
2. 路由跳转触发重渲染：CustomerHistory中navigate修改URL参数后，会触发组件重新渲染，结合StrictMode的双重执行，进一步放大了重复调用问题。
3. 父组件重渲染传导：当CustomerDetails中的customerEntity更新时，父组件重渲染会带动子组件CustomerHistory同步重渲染，若未做优化，会再次触发useEffect。

可行解决方案 #

1. 拦截重复API请求（适配StrictMode） #

在getCustomerHistoryById的action或API封装层添加重复请求拦截，基于请求标识（如customerId+page）避免重复调用：

// 示例：在action中添加重复请求判断
let pendingRequests = new Map();

export const getCustomerHistoryById = (params) => async (dispatch) => {
  const requestKey = `${params.customer}-${params.page}`;
  if (pendingRequests.has(requestKey)) return;
  
  pendingRequests.set(requestKey, true);
  try {
    const response = await api.getCustomerHistory(params);
    dispatch({ type: 'GET_CUSTOMER_HISTORY_SUCCESS', payload: response.data });
  } catch (error) {
    dispatch({ type: 'GET_CUSTOMER_HISTORY_FAILURE', payload: error });
  } finally {
    pendingRequests.delete(requestKey);
  }
};

2. 拆分useEffect逻辑，减少耦合 #

将API请求与URL同步逻辑拆分到独立的useEffect中，避免依赖项交叉触发重复执行，同时用replace模式跳转路由减少历史记录生成：

const CustomerHistory = props => {
  const dispatch = dispatch();
  const location = useLocation();
  const navigate = useNavigate();
  const [currentPage, setCurrentPage] = useState(0);

  // 仅处理API请求逻辑
  useEffect(() => {
    if (!props.customer) return;
    // 从URL解析当前页码，保证state与URL一致性
    const urlParams = new URLSearchParams(location.search);
    const urlPage = parseInt(urlParams.get('page')) || 0;
    if (urlPage !== currentPage) {
      setCurrentPage(urlPage);
      return;
    }
    dispatch(
      getCustomerHistoryById({
        customer: props.customer,
        filter: {},
        page: currentPage,
        size: 10,
      })
    );
  }, [currentPage, props.customer, location.search]);

  // 仅处理URL同步逻辑
  useEffect(() => {
    const targetURL = `?page=${currentPage}`;
    if (location.search !== targetURL) {
      navigate(`${location.pathname}${targetURL}`, { replace: true });
    }
  }, [currentPage, location.pathname, location.search]);

  return (
    <Fragment>
      <h1>Customer History List</h1>
    </Fragment>
  );
};

3. 用React.memo优化子组件渲染 #

用React.memo包裹CustomerHistory，当props.customer未变化时，阻止组件不必要的重渲染：

const CustomerHistory = React.memo(props => {
  // 组件原有逻辑
});

注意确保props.customer是字符串/数字这类稳定类型，避免父组件重渲染时传递新引用导致子组件触发渲染。

4. 子组件直接获取路由参数，减少props依赖 #

既然customerId来自路由，可在CustomerHistory中直接用useParams获取，无需父组件传递，切断父组件重渲染对子组件的影响：

const CustomerHistory = () => {
  const params = useParams();
  const customerId = params?.id;
  // 后续逻辑直接使用customerId
};

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