React中如何将XLSX解析结果存入组件state？

我来帮你搞定这个问题！你遇到的核心问题有两个：一是this.setState()的语法/逻辑错误，二是没有正确收集处理后的完整数据集再存入state。下面一步步帮你修正：

问题分析 #

1. this.setState()语法错误：你在forEach回调里直接写this.setState({ data: r })或者带多余逗号的调用，要么是逻辑上每次只存单条数据，要么是语法格式错误。
2. data变量未定义：你注释掉了const data = XLSX.utils.sheet_to_json(ws);，但其实可以先把解析后的数组存下来，统一处理后再存入state。

修正方案 #

我们需要先收集所有处理后的Excel数据到一个数组，再一次性调用setState更新组件状态，这样既避免多次触发重渲染，也能拿到完整的数据集。同时用map替代forEach来处理数据，代码更简洁易读：

完整修正后的代码 #

handleUpload(e) {
  e.preventDefault();
  const file = e.target.files[0];
  const reader = new FileReader();
  const rABS = !!reader.readAsBinaryString;

  reader.onload = (e) => {
    const bstr = e.target.result;
    const wb = XLSX.read(bstr, { type: rABS ? 'binary' : 'array' });
    const wsname = wb.SheetNames[0];
    const ws = wb.Sheets[wsname];

    // 1. 解析Excel数据为JSON数组，同时处理每条数据的格式
    const processedData = XLSX.utils.sheet_to_json(ws).map(r => {
      return {
        itemid: r.itemid.trim(),
        barcode: r.barcode ? r.barcode.trim() : "",
        itemname: r.itemname.trim(),
        category: r.category.trim(),
        stocktype: r.stocktype ? r.stocktype.trim() : "",
        itemtype: r.itemtype ? r.itemtype.trim() : "",
        wholesaleprice: Number(r.wholesaleprice),
        retailprice: Number(r.retailprice),
        quantitystock: r.quantitystock ? Number(r.quantitystock) : 0,
        receivingquantity: r.receivingquantity ? Number(r.receivingquantity) : 0,
        reorderlevel: r.reorderlevel ? Number(r.reorderlevel) : 0,
        description: r.description ? r.description.trim() : "",
        comment: r.comment ? r.comment.trim() : ""
      };
    });

    // 2. 将处理后的完整数组存入state，回调里可执行后续操作
    this.setState({ data: processedData }, () => {
      // 可选：state更新完成后批量调用createItem
      this.state.data.forEach(item => this.createItem(item));
      // 验证state是否正确更新
      console.log("Excel数据已存入state:", this.state.data);
    });
  };

  if (rABS) reader.readAsBinaryString(file);
  else reader.readAsArrayBuffer(file);
}

关键修改点说明 #

• 用map替代forEach：map会返回处理后的新数组，方便我们直接收集所有处理好的数据，而forEach只是遍历，不会返回结果。
• 一次性更新state：在所有数据处理完成后再调用this.setState，把完整的processedData数组存入state，避免多次触发组件重渲染。
• setState的回调函数：因为setState是异步操作，如果需要在state更新完成后执行业务逻辑（比如调用createItem），要放在setState的第二个参数回调里，这样才能拿到最新的state值。
• 修复语法错误：把原来用逗号分隔的零散赋值改成规范的对象字面量形式，避免语法报错，代码可读性也更强。

这样修改后，你就能把Excel解析并处理后的完整数据存入组件state，同时可以正常编辑每条数据或者进行后续的业务操作啦！

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