React使用useEffect获取Firebase数据导出CSV时出现undefined报错如何解决

问题原因 #

1. headers配置的key字段只需传入你定义的用户对象属性的字符串名称，不需要从data中取实际值。你的data是存储所有用户的数组，直接写data.usersID本质是从数组实例上找usersID属性，自然返回undefined。
2. 组件初始渲染时Firebase的异步请求还未完成，data是初始的空数组，此时CSVLink绑定的导出配置还是初始值，需要等数据加载完成后再生成有效配置。
3. 你在组件顶层声明的list变量会在每次组件重渲染时被重置为空数组，放在异步回调里使用可能出现不可预期的问题，应该把它移到useEffect的回调函数内部。

修正后的代码 #

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

// headers直接写死属性名字符串即可，不需要依赖data
const headers = [
  {label:'User',key:'usersID'},
  {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'},
];

function UserExport() {
  const [data, setData] = useState([]);
  // 加个加载状态，避免数据未加载完用户点击导出
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // list移到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);
      setLoading(false);
    });
  },[]);

  const csvReport = {
    filename:"userReport.csv",
    headers:headers,
    data: data
  }

  return (
    <>
      {loading ? (
        <button disabled>加载中...</button>
      ) : (
        <CSVLink {...csvReport}>导出</CSVLink>
      )}
    </>
  )
}

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