React集成react-data-table-component出现运行时错误求助

在React应用中集成react-data-table-component时，从API获取数据后渲染数据表阶段出现运行时错误，页面刷新时触发，偶尔二次刷新后问题暂时解决但仍反复出现，需确保API数据能正确在数据表中展示。

使用的代码 #

import React, { useEffect, useState } from "react";
import DataTable from "react-data-table-component";
import axios from "axios";

const InvitationsDataTable = () => {
  const [tableData, setTableData] = useState([]);

  const columns = [
    { name: "Nomor Undangan", selector: "nomor_undangan", sortable: true },
    { name: "Tanggal", selector: "tanggal", sortable: true },
    { name: "Waktu", selector: "waktu", sortable: true },
    { name: "Tempat", selector: "tempat", sortable: true },
    { name: "Agenda", selector: "agenda", sortable: true },
    { name: "Pemimpin", selector: "leader_name", sortable: true },
    { name: "Peserta", selector: "participants", sortable: true },
    { name: "Dokumen", selector: "documents", sortable: true },
  ];

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("http://localhost:5000/api/invitations");
        const invitations = response.data.map((invitation) => ({
          ...invitation,
          tanggal: new Date(invitation.tanggal).toLocaleDateString(),
          waktu: `${invitation.waktu_mulai} - ${invitation.waktu_selesai}`,
          participants: JSON.parse(invitation.participants)
            .map((p) => p.name)
            .join(", "),
          documents: JSON.parse(invitation.documents)
            .map((d) => d.file_path)
            .join(", "),
        }));
        setTableData(invitations);
      } catch (error) {
        console.error("Error fetching invitations:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <DataTable
      title="Daftar Undangan"
      columns={columns}
      data={tableData}
      pagination
      keyField="invitation_id"
    />
  );
};

export default InvitationsDataTable;

报错信息 #

Uncaught runtime errors:
ERROR
t is not a function
TypeError: t is not a function
    at http://localhost:3000/static/js/bundle.js:68245:56
    ...

解决建议 #

• 处理JSON解析和日期解析的异常：代码中直接使用JSON.parse和new Date，若API返回的字段格式不合法会抛出错误，导致数据处理中断，进而引发组件渲染异常。修改数据处理逻辑，增加异常捕获：

  const invitations = response.data.map((invitation) => ({
    ...invitation,
    tanggal: invitation.tanggal ? (() => {
      try {
        return new Date(invitation.tanggal).toLocaleDateString();
      } catch (e) {
        return "无效日期";
      }
    })() : "无日期",
    waktu: `${invitation.waktu_mulai || "无"} - ${invitation.waktu_selesai || "无"}`,
    participants: (() => {
      try {
        return JSON.parse(invitation.participants)?.map(p => p.name).join(", ") || "无数据";
      } catch (e) {
        return "解析失败";
      }
    })(),
    documents: (() => {
      try {
        return JSON.parse(invitation.documents)?.map(d => d.file_path).join(", ") || "无数据";
      } catch (e) {
        return "解析失败";
      }
    })(),
  }));
  

• 验证keyField对应字段的存在性：确认API返回的每条数据中是否存在invitation_id字段，react-data-table-component需要该字段作为唯一标识。若不存在，替换为实际存在的唯一字段（如nomor_undangan）：

  <DataTable
    title="Daftar Undangan"
    columns={columns}
    data={tableData}
    pagination
    keyField="nomor_undangan"
  />
  

• 添加加载状态：异步请求数据时，组件初始渲染使用空数组，添加加载状态可避免组件在数据未就绪时的潜在渲染问题：

  const [tableData, setTableData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  
  // 在fetchData的try和catch块中设置加载状态
  try {
    // ...数据处理逻辑
    setTableData(invitations);
    setIsLoading(false);
  } catch (error) {
    console.error("Error fetching invitations:", error);
    setIsLoading(false);
  }
  
  // 在DataTable中传入加载状态
  <DataTable
    title="Daftar Undangan"
    columns={columns}
    data={tableData}
    pagination
    keyField="invitation_id"
    isLoading={isLoading}
  />
  

• 检查版本兼容性：确认react-data-table-component版本与当前React版本兼容，若使用React 18，优先升级组件到最新稳定版，或降级到兼容版本：

  npm update react-data-table-component
  

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