小编Jas*_*onG的帖子

关于这个主题有几篇文章，但似乎没有一篇能完全解决我的问题。我曾尝试使用几个不同的库，甚至是库的组合，以获得所需的结果。到目前为止，我没有运气，但感觉非常接近解决方案。

本质上，我想通过单击按钮下载 CSV 文件。我正在为按钮使用 Material-UI 组件，并希望尽可能将功能与 React 紧密联系在一起，仅在绝对必要时才使用 vanilla JS。

为了提供有关特定问题的更多背景信息，我有一个调查列表。每个调查都有一定数量的问题，每个问题有 2-5 个答案。一旦不同的用户回答了调查，网站管理员应该能够点击下载报告的按钮。此报告是一个 CSV 文件，其中包含与每个问题相关的标题以及显示选择每个答案的人数的相应数字。

显示下载 CSV 按钮的页面是一个列表。该列表显示有关每个调查的标题和信息。因此，该行中的每个调查都有自己的下载按钮。

每个调查都有一个与之关联的唯一 ID。此 ID 用于获取后端服务并提取相关数据（仅针对该调查），然后将其转换为适当的 CSV 格式。由于列表中可能包含数百个调查，因此只能通过每次单击相应调查的按钮来获取数据。

我曾尝试使用多个库，例如 CSVLink 和 json2csv。我的第一次尝试是使用 CSVLink。本质上，CSVLink 被隐藏并嵌入在按钮内。单击该按钮时，它会触发一次提取，从而获取必要的数据。然后更新组件的状态并下载 CSV 文件。

import React from 'react';
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
import { CSVLink } from 'react-csv';
import { getMockReport } from '../../../mocks/mockReport';

const styles = theme => ({
    button: {
        margin: theme.spacing.unit,
        color: '#FFF !important',
    },
});

class SurveyResults extends React.Component {
    constructor(props) { …