React应用加载时useState中同一数据重复存储两次的问题

数据老陈

2026-8-22

React应用加载时数据重复两次的问题修复

核心原因

开发环境严格模式触发重复执行：React开发环境的严格模式会自动重复调用useEffect钩子，用于检测副作用问题，这会导致你的API请求被执行两次，数据重复添加到state中。
异步逻辑处理错误：原代码中try/catch未正确捕获异步函数的错误（调用fetchProducts()时未加await），且finally会在API请求未完成时就设置loading为false，可能引发后续逻辑异常。

修复方案

1. 修正异步函数的错误处理与状态更新逻辑

修改useEffect内部代码，确保异步请求的错误被正确捕获，同时防止组件卸载后更新状态：

useEffect(() => {
  let isMounted = true;
  setLoading(true);
  setError(false);

  const fetchProducts = async () => {
    try {
      const data = await getProducts(limit);
      if (isMounted) {
        setProducts((prevItems) => [...prevItems, ...data.products]);
      }
    } catch (error) {
      if (isMounted) {
        setError(error);
      }
    } finally {
      if (isMounted) {
        setLoading(false);
      }
    }
  };

  fetchProducts();

  return () => {
    isMounted = false;
  };
}, [limit]);

2. 避免开发环境严格模式下的重复请求（可选）

如果需要在开发环境临时屏蔽重复请求，可以用Ref标记首次渲染：

import { useRef } from 'react';

// 组件内部定义
const isFirstRender = useRef(true);

useEffect(() => {
  if (isFirstRender.current) {
    isFirstRender.current = false;
    return;
  }

  // 此处放置修正后的fetch逻辑
}, [limit]);

注：此逻辑仅用于开发调试，生产环境严格模式不会重复执行钩子，无需保留。