如何结合react-csv与react-hook-form导出表单数据为CSV文件

你的代码无法正常导出表单数据是三个逻辑错误导致的：

• 用普通局部变量let data = []存储表单数据，React每次重渲染都会把这个变量重置为空，根本存不住提交的值
• CSVLink首次渲染时拿到的就是空数组，普通变量修改不会触发组件重渲染，所以下载组件永远拿不到你提交的新数据
• 表单提交和CSV下载完全是两套独立逻辑：点提交只打印控制台日志，不会给下载组件传数据；没填表单点下载也只会下载空文件

用React内置的useState持久化存储提交的表单数据，提交表单时更新state，等组件重渲染完成后自动触发CSV下载即可，修正后的完整代码如下：

import React, { useState, useRef } from "react";
import { useForm } from "react-hook-form";
import { CSVLink } from "react-csv";

export default function App() {
  const { register, handleSubmit } = useForm();
  // 用state存储CSV导出数据，初始为空
  const [csvData, setCsvData] = useState([]);
  // 获取CSVLink实例，用于提交后自动触发下载
  const csvLinkRef = useRef(null);

  const headers = [
    { label: "地址", key: "address" },
    { label: "T恤尺码", key: "size" },
    { label: "邮箱", key: "mail" },
  ];

  const onSubmit = (formData) => {
    // react-csv要求data为对象数组，单条表单数据需要包进数组
    // 如果需要累计多次提交的数据到同一个CSV，改成setCsvData(prev => [...prev, formData])即可
    setCsvData([formData]);
    // 等state更新、组件重渲染完成后自动触发下载
    setTimeout(() => {
      csvLinkRef.current.link.click();
    }, 0);
  };

  return (  
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>地址</label>
      <input {...register("address", { required: true })} />

      <label>T恤尺码</label>
      <select {...register("size", { required: true })}>
        <option value="S">S</option>
        <option value="M">M</option>
        <option value="L">L</option>
        <option value="XL">XL</option>
      </select>

      <label>邮箱</label>
      <input {...register("mail", { required: true })} />

      <label>       
        <input type="checkbox" required />
        同意数据隐私政策
      </label>

      {/* 隐藏默认下载链接，避免用户提前点击下载空文件 */}
      <CSVLink 
        data={csvData} 
        headers={headers}
        ref={csvLinkRef}
        style={{ display: 'none' }}
        filename="表单收集数据.csv"
      >
        下载
      </CSVLink>

      <input type="submit" value="提交并下载CSV" />
    </form>
  );
}

• 填写完所有字段、勾选隐私政策后点击提交按钮，会自动触发CSV文件下载
• 导出的文件可以直接用Excel打开，列名和预设的表头完全对应
• 不会出现空文件、数据不同步的问题

内容的提问来源于stack exchange，提问作者Abdellah Brahimi