使用Papa Parse导入CSV时processChunk仅存入数组最后一行如何解决

1. react-csv-importer的processChunk回调是分块执行的，CSV文件会被拆成多个块依次解析，每解析完一个块就触发一次该回调。你当前代码在每次回调里都新建了空数组array，仅存入当前块的行数据，直接覆盖upload.contacts，之前块的所有数据都会被清空。
2. 你在调用setUpload时直接使用了当前闭包中的upload旧值，React状态更新是异步的，多次触发setUpload时拿到的upload永远是回调初始化时的旧状态，状态合并完全失效，最终只会保留最后一个块的内容，如果最后一个块刚好只有1行数据，就会出现仅最后一行被存入数组的现象。

第一步：修改processChunk的状态更新逻辑 #

使用React的函数式状态更新，拿到最新的前置状态，将当前块的行数据追加到已有联系人数组后，而非直接覆盖：

processChunk={async (rows, { startIndex }) => {
  setUpload(prev => ({
    ...prev,
    // 追加当前块的所有行，不是替换
    contacts: [...prev.contacts, ...rows]
  }))
  console.log("processChunk ran");
}}

第二步：补充context初始值 #

确保CsvUploadContext的初始状态里upload的contacts字段默认值为空数组，避免解构时报错：

// context初始化示例
const initialState = {
  upload: {
    // 你的其他原有字段
    contacts: []
  },
  // 其他context字段
}

第三步（可选）：修复onComplete的闭包问题 #

如果onComplete中调用createCsv时拿到的还是旧的upload，同样使用函数式更新获取最新状态：

onComplete={({ file, preview, fields, columnFields }) => {
  setUpload(prevUpload => {
    dispatch(createCsv(prevUpload))
    return prevUpload
  })
  console.log("onComplete ran");
}}

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