React中useEffect结合forEach发送请求重复触发问题咨询

我来帮你分析下问题的根源，然后给出具体的解决方案：

可能的原因 #

1. React开发环境StrictMode的特性：在开发模式下，React的StrictMode会让useEffect执行两次，这是官方用来检测未正确清理的副作用的机制，生产环境不会有这个情况，但会导致你看到请求重复触发。
2. 数组引用不稳定：如果results是在组件函数内部直接定义的（比如你代码里的let results = [...]），每次组件渲染时都会生成一个新的数组实例。哪怕你把它加入useEffect的依赖项，因为引用每次都变，useEffect会反复执行，进而重复发送请求。
3. 缺少请求去重机制：就算useEffect因为某些原因重复执行，也没有逻辑阻止同一个ID的请求被多次发起。

具体解决步骤 #

1. 确保数组引用稳定 #

如果results是组件内的静态数据，用useMemo包裹它，保证每次渲染时引用不变：

import { useEffect, useMemo } from 'react';

// 用useMemo缓存数组，避免每次渲染创建新实例
const results = useMemo(() => [ {id: 34}, {id: 32}, {id: 35} ], []);

如果results是从父组件传入的props，要确保父组件不会每次渲染都生成新数组，或者在当前组件用useMemo根据props的值做缓存。

2. 添加请求去重逻辑 #

用useRef保存一个记录已请求ID的Set，每次发送请求前先检查该ID是否已经请求过：

import { useEffect, useMemo, useRef } from 'react';
import axios from 'axios';

// ...

const results = useMemo(() => [ {id: 34}, {id: 32}, {id: 35} ], []);
// 用useRef保存已请求的ID，不会随渲染重置
const fetchedIds = useRef(new Set());

useEffect(() => {
  results.forEach(async (data) => {
    // 检查ID是否已请求过，避免重复发送
    if (fetchedIds.current.has(data.id)) return;
    
    fetchedIds.current.add(data.id);
    try {
      const resp = await axios.get(`https://nehra.az/public/api/product/${data.id}`);
      console.log(resp);
    } catch (error) {
      // 请求失败时可以移除ID，方便后续重试
      fetchedIds.current.delete(data.id);
      console.error('请求出错:', error);
    }
  });
}, [results]); // 现在把稳定的results加入依赖项

3. 关于StrictMode的说明 #

如果是开发环境下StrictMode导致的两次请求，上面的去重逻辑已经能解决——第二次执行时ID已经在Set里，不会重复发送。生产环境下StrictMode不会生效，所以不会有这个问题。如果你只是想临时验证，可以暂时移除项目入口文件（比如index.js）里的<StrictMode>标签，但不推荐长期这么做，因为StrictMode能帮你提前发现潜在的副作用问题。

这样处理后，就能保证每个ID只发送一次请求，不管组件是否重复渲染、useEffect是否多次触发。

内容的提问来源于stack exchange，提问作者Rahil Əliyev