ReactJS：forEach循环中调用AJAX，setRecord仅更新最后一次响应状态

问题根源 #

你的代码出现这个问题，核心是闭包陷阱：createOrder函数依赖外部的orderRecord变量，而forEach是同步循环，会快速遍历完成，此时orderRecord已经被覆盖为循环的最后一个元素。所有异步请求在实际发送时，引用的都是这个最终的orderRecord值，导致所有请求提交的是同一条数据，响应自然都是最后一次的结果；即使请求参数不同，异步响应顺序不确定时，也可能出现状态更新被覆盖的情况。

解决方案 #

方案1：给createOrder传递参数，避免闭包问题 #

修改createOrder，让它接收当前循环的订单数据作为参数，确保每个请求使用对应循环项的正确数据：

const createOrder = (orderData) => {
    axios.post(`${getServiceURL()}/order`, orderData, headerConfig)
        .then(response => {
            // 函数式更新确保基于最新状态修改
            setRecord((prevData) => [response.data, ...prevData]);
        })
        .catch(error => {
            console.log(error);
        });
};

// 调用时的forEach循环，传递当前item
yourOrderList.forEach(item => {
    createOrder(item);
});

方案2：用Promise.all批量处理请求，一次性更新状态 #

如果不需要实时逐个更新状态，而是等所有请求完成后统一更新，可以使用Promise.all收集所有响应，避免多次触发状态更新，同时保证数据顺序：

const batchCreateOrders = () => {
    // 生成所有请求的Promise数组
    const requestPromises = yourOrderList.map(item => 
        axios.post(`${getServiceURL()}/order`, item, headerConfig)
            .then(res => res.data)
            .catch(err => {
                console.error(err);
                return null; // 捕获错误，避免单个请求失败导致整个批量操作终止
            })
    );

    Promise.all(requestPromises)
        .then(responses => {
            // 过滤掉请求失败的空数据
            const validData = responses.filter(data => data !== null);
            // 批量更新状态，这里按循环顺序添加到record头部，可根据需求调整顺序
            setRecord(prev => [...validData, ...prev]);
        });
};

// 调用批量处理函数
batchCreateOrders();

关键说明 #

• 函数式更新setRecord((prevData) => [...])是正确写法，能确保每次更新都基于最新的状态快照，避免状态覆盖；
• 核心问题还是闭包导致的参数引用错误，只要让每个请求携带独立参数，就能解决大部分问题；
• 批量处理的方式更适合需要保证数据顺序、减少状态更新次数的场景。

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