React Native中如何限制useEffect内API重复调用？

问题分析 #

你遇到的首次加载API调用两次的情况，大概率是**React严格模式（Strict Mode）**导致的——开发环境下，Strict Mode会主动触发两次副作用（比如useEffect）来检测潜在的代码问题，生产环境不会有这个行为。另外现有代码里不管transactions是否为空都会执行API调用，也可能加剧重复触发的问题。

解决方案 #

我们可以用useRef标记首次加载状态，确保首次只调用一次API，同时保留user或onChainBalance变化时重新调用的逻辑：

import { useEffect, useRef, useState } from 'react';

// ... 你的组件其他代码

// 用ref记录是否是首次加载，ref的值在组件生命周期内不会被重置
const isFirstLoad = useRef(true);

// 封装API调用逻辑，避免重复代码
const fetchTransactions = async () => {
  setIsAPICall(true);
  try {
    const response = await getTransactions();
    dispatch(actionTransitionsBadge(0));
    setTransactions(response);
  } finally {
    // 无论请求成功失败，都标记API调用结束
    setIsAPICall(false);
  }
};

useEffect(() => {
  if (isFirstLoad.current) {
    // 首次加载：执行一次API调用后标记为非首次
    fetchTransactions();
    isFirstLoad.current = false;
  } else {
    // 非首次加载：当user或onChainBalance变化时重新调用API
    fetchTransactions();
  }
}, [user, onChainBalance]);

关键说明 #

• useRef的特性是其.current属性在组件整个生命周期内保持不变，不会因为组件重新渲染而重置，刚好用来标记首次加载状态。
• 把API调用封装成单独的fetchTransactions函数，让代码更简洁易维护，同时用async/await替代.then，提升可读性。
• 如果你的user或onChainBalance在首次渲染时存在频繁变化的情况，也会导致useEffect多次触发，需要检查这两个状态的初始化逻辑，确保初始值稳定。

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