ReactJS用react-csv导出Firestore数据时提示数据格式错误如何解决？

错误原因 #

• 表头配置错误：headers数组的key字段需要填写数据对象对应的属性名字符串，你错误传入了单条数据的属性值变量
• 导出数据结构错误：react-csv的CSVLink组件要求传入的data属性是所有要导出数据组成的对象数组，你当前传入的是每个用户单独封装的导出配置数组，结构完全不匹配
• 单条数据赋值错误：你将单个用户对象赋值给data，不符合报错提示要求的字符串、二维数组、对象数组格式要求

修正后代码 #

import { CSVLink } from 'react-csv';
import { useState, useEffect } from 'react';

// 此处省略你原有组件的其他逻辑
const YourComponent = () => {
  const [data, setData] = useState([]);
  // 表头固定配置，不需要放在循环内重复生成
  const csvHeaders = [            
    { label: 'Account', key: 'powerAccount' },
    { label: 'Name', key: 'first_name' },
    { label: 'RegistrationDate', key: 'registerDate' },
    { label: 'Email', key: 'email' },
    { label: 'Company', key: 'company' },
    { label: 'Country', key: 'country' },
    { label: 'Phone', key: 'phone' },
    { label: '用户ID', key: 'usersID' }
  ];

 useEffect(() => {
    const list = []
    firebase.firestore().collection("Users").get().then((userSnapshot) => {
      userSnapshot.forEach((doc) => {
        const {powerAccount,first_name,registerDate,email,company,country,phone} = doc.data();
        list.push({
          usersID:doc.id,
          powerAccount:powerAccount,
          first_name:first_name,
          registerDate:registerDate,
          email:email,
          company:company,
          country:country,
          phone:phone,
        });
      });
      setData(list);
    });
  },[]);

 return (
    <CSVLink  
      filename="userReport.csv"
      headers={csvHeaders}
      data={data}
    >
      导出
    </CSVLink>
  )
}
export default YourComponent;

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