react-csv 组件不生成文件答案

【问题标题】：react-csv component not generating filereact-csv 组件不生成文件
【发布时间】：2023-01-26 22:17:33
【问题描述】：

我是 react-csv 组件的新手，正在努力下载该组件应返回给用户的 csv。下面是我的代码的摘录。我仔细检查了从我的 API 返回的数据。它是一个对象数组。请问你能帮忙吗？

export default function ProductsTableFooter({ ...props }) {

    const [data, setData] = useState([]);



    useEffect(() => {
        handleDownloadCSV();
    }, []);

    const handleDownloadCSV = async () => {
        try {
            console.log('clicked')
            const data = await axios.get(
                `http://api.myapiaddress.local/csv/products?fornitore=10&utilizzo=0&stato=Liquido&nome=cor`,
            );
            const resData = Papa.parse(data.data, { header: true, dynamicTyping: true }).data;
            setData(resData);
        } catch (error) {
            console.error(error);
        }
    };


    return (
        <div className="flex flex-row rounded px-2 py-1 mt-2 text-white mr-4 mb-8 " style={{ background: colors.tableHeaderColor }}>

            <div className="flex flex-row justify-start items-center flex-1">

                <div>
                    <RoundButton icon={<FaFileCsv size={23} />} onClick={handleDownloadCSV} />
                    <CSVLink
                        headers={["a", "b", "c", "d", "d", "e"]}
                        target="_blank"
                        filename={"prodotti"}
                        data={data}
                    />
                </div>
            </div>
        </div >
    );
}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

在 react-csv 文档 https://www.npmjs.com/package/react-csv 中，我看到如果设置 target="_blank"，他们使用组件 CSVDownload。你可以试试： <CSVDownload data={csvData} target="_blank" />;

【讨论】：