Javascript 使用react csv进行API调用

我试图添加一个选项，将数据作为CSV文件下载到我的组件中。但是，下面的代码有时会打印一个垃圾字符

ï»

，其他时候也可以使用。我不明白我在这里做错了什么。我尝试按照这里提供的示例进行操作：

这是我的密码

import React, { useState } from "react";
import axios from "axios";

import {
  Card,
  CardHeader,
  CardTitle,
  DropdownItem,
  DropdownMenu,
  DropdownToggle,
  Table,
  UncontrolledDropdown,
  Progress
} from "reactstrap";

import { MoreHorizontal } from "react-feather";
import { CSVLink } from "react-csv";

const Languages = () => {
  const [data, setData] = useState([]);
  return (
  <Card className="flex-fill w-100">
<CardHeader>
      <div className="card-actions float-right">
        <UncontrolledDropdown>
          <DropdownToggle tag="a">
            <MoreHorizontal />
          </DropdownToggle>
          <DropdownMenu right>
            <DropdownItem><CSVLink data={data} filename={'my-file.csv'} asyncOnClick={true}
              onClick={(event, done) => {
                    axios.get("http://localhost:9091/api/returnIndices", {
                      params: {
                        view: 'Series',
                        bucket: '3_7',
                        group: 'Ratings',
                        metric: 'Price Return',
                        download: true
                      }
                    }).then((response) => {
                      const data = response.data.payload;
                      console.log(data);
                      setData(JSON.parse(data));
                      done(false); // REQUIRED to invoke the logic of component
                  });
                }}>Download me</CSVLink></DropdownItem>
        </DropdownMenu>
        </UncontrolledDropdown>
      </div>
      <CardTitle tag="h5" className="mb-0">
        Languages
      </CardTitle>
    </CardHeader>
  </Card>
);
}

export default Languages;

import React，{useState}来自“React”；
从“axios”导入axios；
进口{
卡片
万向节，
名片，
下拉项，
下拉菜单，
下拉开关，
桌子
不受控制的下降，
进展
}从“反应带”；
从“react feather”导入{MoreHorizontal}；
从“react csv”导入{CSVLink}；
常量语言=（）=>{
const[data，setData]=useState（[]）；
返回(
{
axios.get（“http://localhost:9091/api/returnIndices", {
参数：{
视图：“系列”，
桶：“3_7”，
组别:"评级",，
指标：'价格回报'，
下载：真的
}
})。然后（（响应）=>{
const data=response.data.payload；
控制台日志（数据）；
setData（JSON.parse（data））；
done（false）；//调用组件逻辑所需
});
}}>下载我
语言文字
);
}
导出默认语言；

我最终还是跟着这篇文章走了

这就是我最后要做的

CsvExport.js

import React, { useState, useEffect, useRef } from 'react';
import { CSVLink } from 'react-csv';
import axios from "axios";
import { config } from '../../../config';

const CsvExport = ({view, bucket, group, metric, startDateMs, endDateMs}) => {
  const [csvData, setCsvData] = useState(false);
  const csvInstance = useRef();
  useEffect(() => {
    if (csvData && csvInstance.current && csvInstance.current.link) {
      setTimeout(() => {
        csvInstance.current.link.click();
        setCsvData(false);
      });
    }
  }, [csvData]);

  return (
    <div type="button" tabIndex="0" role="menuitem" className="dropdown-item">
      <div
        onClick={async () => {
          const newCsvData = await axios.get(config.serviceHost + config.downloadPath, {
            params: {
            view: view,
            bucket: bucket,
            group: group,
            metric: metric,
            startDate: startDateMs,
            endDate: endDateMs,
            download: true
            }
        });
        //   console.log(newCsvData.data.payload);
        const filename = [view, bucket, group, metric, Date.now()].join('_') + '.csv';
          setCsvData({
              data: JSON.parse(newCsvData.data.payload),
              filename: filename
          });
        }}
      >
          Download as CSV
      </div>
      {csvData ?
        <CSVLink
          data={csvData.data}
          filename={csvData.filename}
          ref={csvInstance}
        />
      : undefined}
    </div>

  );
};

export default CsvExport;

<div className="card-actions float-right">
 <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
   <DropdownToggle tag="a">
     <MoreHorizontal />
   </DropdownToggle>
   <DropdownMenu right>
     <CsvExport metric={metric} view={view} bucket={bucket} group={group} startDateMs={this.convertToMs(this.props.startDate)} endDateMs={this.convertToMs(this.props.endDate)}/>
   </DropdownMenu>
 </Dropdown>
</div>

import React，{useState，useffect，useRef}来自'React'；
从'react csv'导入{CSVLink}；
从“axios”导入axios；
从“../../../config”导入{config}；
const CsvExport=（{view，bucket，group，metric，startDateMs，endDateMs}）=>{
const[csvData，setCsvData]=useState（false）；
const csvInstance=useRef（）；
useffect（（）=>{
if（csvData&&csvInstance.current&&csvInstance.current.link）{
设置超时（（）=>{
csvInstance.current.link.click（）；
setCsvData（假）；
});
}
}，[csvData]）；
返回(
{
const newCsvData=wait axios.get（config.serviceHost+config.downloadPath{
参数：{
视图：视图，
桶：桶，
组:组,，
公制：公制，
开始日期：开始日期，
endDate:endDateMs，
下载：真的
}
});
//log（newCsvData.data.payload）；
const filename=[view，bucket，group，metric，Date.now（）].join（“''+'.csv'”；
setCsvData({
数据：JSON.parse（newCsvData.data.payload），
文件名：文件名
});
}}
>
以CSV格式下载
{csvData？
：未定义}
);
};
导出默认CsvExport；

Languages.js

import React, { useState, useEffect, useRef } from 'react';
import { CSVLink } from 'react-csv';
import axios from "axios";
import { config } from '../../../config';

const CsvExport = ({view, bucket, group, metric, startDateMs, endDateMs}) => {
  const [csvData, setCsvData] = useState(false);
  const csvInstance = useRef();
  useEffect(() => {
    if (csvData && csvInstance.current && csvInstance.current.link) {
      setTimeout(() => {
        csvInstance.current.link.click();
        setCsvData(false);
      });
    }
  }, [csvData]);

  return (
    <div type="button" tabIndex="0" role="menuitem" className="dropdown-item">
      <div
        onClick={async () => {
          const newCsvData = await axios.get(config.serviceHost + config.downloadPath, {
            params: {
            view: view,
            bucket: bucket,
            group: group,
            metric: metric,
            startDate: startDateMs,
            endDate: endDateMs,
            download: true
            }
        });
        //   console.log(newCsvData.data.payload);
        const filename = [view, bucket, group, metric, Date.now()].join('_') + '.csv';
          setCsvData({
              data: JSON.parse(newCsvData.data.payload),
              filename: filename
          });
        }}
      >
          Download as CSV
      </div>
      {csvData ?
        <CSVLink
          data={csvData.data}
          filename={csvData.filename}
          ref={csvInstance}
        />
      : undefined}
    </div>

  );
};

export default CsvExport;

<div className="card-actions float-right">
 <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
   <DropdownToggle tag="a">
     <MoreHorizontal />
   </DropdownToggle>
   <DropdownMenu right>
     <CsvExport metric={metric} view={view} bucket={bucket} group={group} startDateMs={this.convertToMs(this.props.startDate)} endDateMs={this.convertToMs(this.props.endDate)}/>
   </DropdownMenu>
 </Dropdown>
</div>