React中使用useEffect调用API多次，如何实现仅执行一次？

你写的代码里给useEffect传空依赖数组[]的思路是正确的，正常情况下这个写法会让useEffect只在组件第一次挂载时执行一次。如果还是出现多次调用的情况，可以从这几个方向排查和解决：

可能的原因及解决方法 #

• 开发环境下的React严格模式：React在开发模式的StrictMode中，会刻意重复执行useEffect等钩子，目的是帮你检测副作用里的潜在问题。这种情况不用修改代码，生产环境下不会出现重复执行的现象。
• 组件被多次挂载/卸载：如果你的组件在路由切换、条件渲染（比如{show && <YourComponent />}）场景下被反复创建和销毁，每次组件挂载都会触发useEffect。这时候需要检查组件的使用场景，避免不必要的重复挂载。
• 函数重复创建的潜在风险：如果getData定义在组件内部，每次组件渲染都会重新生成这个函数。虽然你当前没把它放进useEffect的依赖数组，但后续如果不小心添加进去，就会导致useEffect多次执行。可以通过useCallback包裹函数，或者直接把请求逻辑写进useEffect来规避。

优化后的代码示例 #

方式一：直接将请求逻辑写入useEffect #

这种方式更简洁，避免额外的函数创建：

useEffect(() => {
  fetch("https://countriesnow.space/api/v0.1/countries/capital")
    .then((response) => response.json())
    .then((data) => {
      scname(data.data);
    })
    .catch((err) => {
      // 增加错误处理，避免请求失败无反馈
      console.error("获取数据失败：", err);
    });
}, []);

方式二：用useCallback包裹getData函数 #

如果需要复用getData函数，可以用useCallback固定函数引用：

import { useEffect, useCallback } from 'react';

// ...

const getData = useCallback(() => {
  fetch("https://countriesnow.space/api/v0.1/countries/capital")
    .then((response) => response.json())
    .then((data) => {
      scname(data.data);
    })
    .catch((err) => {
      console.error("获取数据失败：", err);
    });
}, [scname]); // 依赖scname，确保scname更新时能重新执行（按需添加）

useEffect(() => {
  getData();
}, [getData]); // 依赖经过useCallback处理后的getData，避免不必要的触发

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