Reactjs 读取本地CSV文件并将其显示为React组件时出错

我正在尝试读取系统本地的csv文件（名称和位置已知），并将其显示给前端

在代码中嵌入csv确实正确地显示了它，但是当文件位于代码外部时，它无法工作

工作原理：

import { CsvToHtmlTable } from "react-csv-to-table";
import React, { PureComponent } from "react";

const sampleData = `Id,Name
36967,Jephthah Creamer
...
`;

export default class ValidationReport extends PureComponent {
  render() {
    return (
      <div style={{
        maxWidth: "100%",
        overflow: "auto"
      }}>
        <CsvToHtmlTable
          data={sampleData}
          csvDelimiter=','
          tableClassName='table table-striped table-hover'
        />
      </div>
    );
  }
}

我还希望以类似的方式显示本地HTML（以响应UI）

---

不使用jQuery的任何帮助都将非常有用。

数据数组包含什么？Id，名称36967，Jephthah CreamerI的意思是什么类型的数据？这是一个

数组

还是

对象

？它包含数组

import React from "react";
import ReactDOM, { render } from "react-dom";
import { CsvToHtmlTable } from "react-csv-to-table";


/* CSV IMPORTING*/
import * as Papa from "papaparse";
import file from "./abc.csv";

import "./index.css";
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }

  componentWillMount() {
    this.parseCsvToObj();
  }

  componentDidMount() { }

  parseCsvToObj() {
    let self = this;
    Papa.parse(file, {
      complete: function (results) {
        let dataArray = results.data;
        let newObj = {};
        dataArray.forEach(item => {
          let addobj = {
            name: item[0],
            age: item[1],
          };
          newObj = [...newObj, addobj];
        });
        self.setState({ data: newObj });
      }
    });
  }

  render() {
    return (
      <div style={{
        maxWidth: "100%",
        overflow: "auto"
      }}>
        <CsvToHtmlTable
          data={this.state.data}
          csvDelimiter=','
          tableClassName='table table-striped table-hover'
        />
      </div>
    );
  }
}

export default App;

TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
(anonymous function)
D:/myapp/src/App.js:37
  34 |       name: item[0],
  35 |       age: item[1],
  36 |     };
> 37 |     newObj = [...newObj, addobj];
     | ^  38 |   });
  39 |   self.setState({ data: newObj });
  40 | }