如何在ReactJs中等待CSV回传并解析promise？

在ReactJs中等待CSV回传并解析promise可以通过以下步骤实现：

首先，确保在React项目中安装了相应的依赖库，包括csv-parser和axios。可以通过运行以下命令来安装它们：

npm install csv-parser axios

在React组件中，使用axios发送异步请求以获取CSV文件。在获取到回应后，将其保存为一个Promise对象。以下是一个示例代码：

import React, { useState } from 'react';
import axios from 'axios';
import * as csvParser from 'csv-parser';

function MyComponent() {
  const [csvData, setCsvData] = useState([]);

  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    const promise = new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        resolve(e.target.result);
      };
      reader.onerror = (e) => {
        reject(new Error('Unable to read the file'));
      };
      reader.readAsText(file);
    });

    promise
      .then((csvContent) => {
        return new Promise((resolve, reject) => {
          const parsedData = [];
          const stream = csvParser({ headers: false })
            .on('data', (row) => parsedData.push(row))
            .on('end', () => resolve(parsedData))
            .on('error', (error) => reject(error));

          stream.write(csvContent);
          stream.end();
        });
      })
      .then((parsedData) => {
        setCsvData(parsedData);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  return (
    <div>
      <input type="file" onChange={handleFileUpload} />
      {csvData.map((row, index) => (
        <div key={index}>{JSON.stringify(row)}</div>
      ))}
    </div>
  );
}

export default MyComponent;

上述代码首先创建了一个promise对象，通过使用FileReader读取上传的CSV文件，并在onload回调函数中将结果传递给resolve方法。
接下来，当promise对象成功返回时，再次创建一个新的promise对象，以便解析CSV数据。这里使用了csv-parser库来解析CSV内容。通过on('data')事件，将解析后的数据保存到parsedData数组中。当所有数据都解析完成时，通过on('end')事件将解析后的数据传递给resolve方法。
最后，通过then方法链式调用，将解析后的数据设置到组件的csvData状态中，以便在渲染过程中显示数据。如果发生任何错误，通过catch方法捕获并打印错误信息。