React中map循环引发无限重渲染，如何批量提交数据至API？

错误原因 #

你直接在组件顶层代码里执行parsedData.map()，每次组件渲染时这段代码都会自动运行。而map循环里调用了SetAddInputData修改状态，状态更新又会触发组件重新渲染——这就形成了无限循环，React为了保护应用就抛出了"Too many re-renders"的错误。

另外还有两个隐性问题：

• 每次循环都覆盖addInputData的状态，最后只会保留最后一个person的数据；
• 调用addNewLead时，因为setState是异步的，你传入的addInputData大概率还是旧值，提交的数据会出错。

解决方案 #

把批量提交逻辑放到useEffect钩子中，仅在parsedData变化时执行，同时去掉不必要的状态暂存，直接构造数据提交：

修改后的代码示例

import { useState, useEffect } from 'react';

// 组件内部代码
const [parsedData, setParsedData] = useState([]);
const [isSubmitting, setIsSubmitting] = useState(false); // 新增提交状态，防止重复操作

const handleSubmit = (event) => {
    Papa.parse(event.target.files[0], {
        header: true,
        skipEmptyLines: true,
        complete: function (results) {
            setParsedData(results.data);
        },
    });
};

// 用useEffect监听parsedData变化，触发提交逻辑
useEffect(() => {
    // 无数据或正在提交时，直接返回
    if (!parsedData.length || isSubmitting) return;

    setIsSubmitting(true);

    // 构造所有提交请求的Promise数组
    const submitTasks = parsedData.map(person => {
        const leadInfo = {
            status: person.status,
            first_name: person.first_name,
            last_name: person.last_name,
            position: person.position,
            email: person.email,
            phone: person.phone,
            image_url: person.image_url,
            linked_in: person.linked_in,
            business_name: person.business_name,
            postcode: person.postcode,
            icebreaker: person.icebreaker,
            paragraph_one: person.paragraph_one,
            paragraph_two: person.paragraph_two,
            paragraph_three: person.paragraph_three,
            call_to_action: person.call_to_action,
        };
        // 直接调用提交接口，注意这里传的是leadInfo，根据你的addNewLead定义调整参数格式
        return addNewLead(leadInfo);
    });

    // 等待所有提交请求完成
    Promise.all(submitTasks)
        .then(() => {
            alert('所有数据提交成功');
            setParsedData([]); // 提交完成后清空数据
        })
        .catch(err => {
            console.error('提交失败:', err);
            alert('部分数据提交失败，请查看控制台日志');
        })
        .finally(() => {
            setIsSubmitting(false); // 无论成功失败，都结束提交状态
        });
}, [parsedData, isSubmitting]); // 依赖项：仅当parsedData或isSubmitting变化时执行

关键优化点

1. useEffect控制执行时机：只有当文件解析完成、parsedData更新时，才会触发提交逻辑，彻底避免无限循环。
2. 直接构造数据提交：不再用addInputData状态暂存数据，直接在循环里构造每个对象并发起请求，规避了setState的异步问题。
3. Promise.all批量处理：一次性管理所有请求的完成状态，方便统一处理成功/失败场景，也能提升用户体验。
4. 提交状态锁：isSubmitting状态防止用户在提交过程中重复操作，避免重复请求。

额外建议

如果你的后端支持批量创建接口，建议把整个parsedData数组处理后一次性提交，这样只需要一个请求，效率更高：

// 批量提交逻辑示例
const bulkLeads = parsedData.map(person => ({
    status: person.status,
    first_name: person.first_name,
    // ...其他字段
}));
addBulkLeads(bulkLeads); // 调用后端批量接口

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