Reactjs React-将数据从外部API传递到CSV文件

我正在尝试从外部api传递数据，并将其转换为CSV文件。这就是我到目前为止所做的：

import React, { Component } from 'react';
import { CSVLink } from "react-csv";
import Header from './components/header'
import './App.scss'

class App extends Component {

  constructor() {
    super()
    this.state = {
      orders: []
    }
    this.getReports = this.getReports.bind(this)
  }

  getReports = async () => {
    const response = await fetch('example.com')
    const ordersData = await response.json()

    this.setState({
      orders: ordersData.data,

    })

    let order = this.state.orders.map(order => ({
      ID: order.id,
      Order_ID: order.order_id,
      Date: order.created,
      Amount: order.total_amount,
      Payment_Provider: order.payments[0].provider_id,
      Payment_ID: order.payments[0].id,
      Refund_Reason: order.reason
    }))

    const objectToCsv = (order) => {

      const csvRows = [];
      const headers = Object.keys(order[0])
      csvRows.push(headers.join(','));

      // console.log(csvRows)

      for (const row of order) {
        const values = headers.map(header => {
          const escaped = ('' + row[header]).replace(/"/g, '\\"')
          return `"${escaped}"`
        })
        csvRows.push(values.join(','))
      }

      return csvRows.join('\n')

    }

    let csvData = objectToCsv(order)

    console.log(csvData)

    // console.log(order)
    // console.log(this.state.orders)
  }

  render() {

    return (
      <div className="App">
        <Header />
        <div className="body">
          {/* <button onClick={this.getReports}>CLICK</button> */}
          <CSVLink data={csvData} onClick={this.getReports}>Click me</CSVLink>
        </div>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“react csv”导入{CSVLink}；
从“./components/Header”导入标题
导入“./App.scss”
类应用程序扩展组件{
构造函数（）{
超级（）
此.state={
订单：[]
}
this.getReports=this.getReports.bind（this）
}
getReports=async（）=>{
const response=wait fetch（'example.com'）
const ordersData=await response.json（）
这是我的国家({
订单：ordersData.data，
})
让order=this.state.orders.map（order=>({
ID:order.ID，
Order\u ID:Order.Order\u ID，
日期：order.created，
金额：订单总金额，
付款\u提供程序：订单。付款[0]。提供程序\u id，
付款\u ID:order.payments[0].ID，
退款原因：order.Reason
}))
const objectToCsv=（顺序）=>{
常数csvRows=[]；
const headers=Object.keys（顺序[0]）
csvRows.push（headers.join（'，'）；
//控制台日志（csvRows）
for（订单的常量行）{
常量值=headers.map（header=>{
常量转义=（“”+行[header]）。替换（/“/g，“\\”）
返回“${escaped}”`
})
csvRows.push（values.join（'，'））
}
返回csvRows.join（'\n'）
}
设csvData=objectToCsv（订单）
console.log（csvData）
//console.log（订单）
//console.log（this.state.orders）
}
render（）{
返回(
{/*单击*/}
点击我
);
}
}
导出默认应用程序；

我面临的问题是，我无法将csvData变量传递给CsvLink组件中的数据属性，因为该变量不是全局变量。我尝试添加另一个csvData状态，在那里我传递了objectToCsv（order），这会停止错误，但是当我下载CSV时，内容是jiberish。

---

非常感谢您的帮助

我已将以下内容添加到我的getReports函数中，并删除了csvLink组件，并且我能够将数据导出到CSV文件，但这绝对不是一个好的UX。我仍然需要将输入分离到列中

const blob = new Blob([csvData], { type: 'text/csv' })
const url = window.URL.createObjectURL(blob)
const a = document.createElement('a')
a.setAttribute('hidden', '')
a.setAttribute('href', url)
a.setAttribute('download', 'download.csv')
document.body.appendChild(a)
a.click()

---

我已经在getReports函数中添加了以下内容，并删除了csvLink组件，我能够将数据导出到CSV文件，但这绝对不是一个好的UX。我仍然需要将输入分离到列中

const blob = new Blob([csvData], { type: 'text/csv' })
const url = window.URL.createObjectURL(blob)
const a = document.createElement('a')
a.setAttribute('hidden', '')
a.setAttribute('href', url)
a.setAttribute('download', 'download.csv')
document.body.appendChild(a)
a.click()

---

console.log（csvData）

是否提供了预期结果？是的，它正在记录数据。

console.log（csvData）

是否提供了预期结果？是，它正在记录数据。谢谢你的回答…如果我想下载表中的一些列和行…如何做…请让我知道…谢谢你的回答…如果我想下载表中的一些列和行…如何做…请让我知道。。。