如何将csv数据分配给react中的状态？

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      csvData: []
    };
  }

  render() {
    // 组件的渲染逻辑
    return (
      // JSX代码
    );
  }
}

export default MyComponent;

componentDidMount() {
  fetch('path/to/csv/file.csv')
    .then(response => response.text())
    .then(data => {
      const csvData = this.parseCSV(data);
      this.setState({ csvData });
    })
    .catch(error => {
      console.error('Error fetching CSV data:', error);
    });
}

parseCSV(csv) {
  // 解析CSV数据并将其转换为JSON格式
  // 可以使用现有的CSV解析库，如csv-parser或papaparse
  // 这里只是一个示例，具体实现取决于你选择的库
  const lines = csv.split('\n');
  const headers = lines[0].split(',');
  const jsonData = [];

  for (let i = 1; i < lines.length; i++) {
    const currentLine = lines[i].split(',');
    const entry = {};

    for (let j = 0; j < headers.length; j++) {
      entry[headers[j]] = currentLine[j];
    }

    jsonData.push(entry);
  }

  return jsonData;
}

render() {
  const { csvData } = this.state;

  return (
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          {/* 其他表头 */}
        </tr>
      </thead>
      <tbody>
        {csvData.map((row, index) => (
          <tr key={index}>
            <td>{row['Column 1']}</td>
            <td>{row['Column 2']}</td>
            {/* 其他表格单元格 */}
          </tr>
        ))}
      </tbody>
    </table>
  );
}