React中如何让useEffect内的fetchItems函数仅首次加载时调用一次

1. 直接修改state对象的规范问题 #

首先明确：直接修改brands状态对象属于错误写法，完全不符合React规范

• React的state是不可变数据，直接修改原对象不会触发组件重渲染，还会导致状态追踪失效、后续更新出现不可预期的覆盖问题
• 所有状态更新必须通过setBrands传入全新的对象实现

2. 解决useEffect重复执行+ESLint警告问题 #

你当前的核心矛盾是：

• 把brands加入依赖数组会导致每次状态更新都重新触发fetch，重置数据
• 移除brands依赖会触发ESLint警告，因为effect内部用到了brands变量

最优解是把固定的初始brands结构抽为独立常量，脱离对state的依赖：

修正后代码示例 #

// 组件外部抽离固定的初始结构常量，不依赖state
const INITIAL_BRANDS = {CAT: "", RET: "", RTF: "", NW: ""};

// 组件内部代码
const [brands, setBrands] = useState(INITIAL_BRANDS);

useEffect(() => {
  const fetchItems = async () => {
    // 先创建全新的对象存储请求结果，不修改原state
    const fetchedBrands = {...INITIAL_BRANDS};
    for (const brandKey in fetchedBrands) {
      // 这里根据你的实际逻辑调整参数，原代码中b.id请对应替换为正确的取值逻辑
      fetchedBrands[brandKey] = await getCarts(brandKey);
    }
    // 调用setBrands一次性更新状态
    setBrands(fetchedBrands);
  };
  fetchItems();
// 依赖数组为空，仅首次挂载执行，无ESLint警告
}, []);

return (
  <CartForm setBrands={setBrands} />
);

方案说明 #

• 常量INITIAL_BRANDS是固定值，不属于组件的state/props，因此effect内部没有用到任何需要加入依赖的变量，空依赖数组完全符合react-hooks/exhaustive-deps规则，不会触发警告
• 后续子组件调用setBrands更新状态时，不会再触发effect执行，不会出现数据被重置的问题
• 所有状态更新都通过传入新对象实现，符合React不可变数据要求，状态运行稳定

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