React 应用程序中的react-data-table-component 运行时错误

Question

我在尝试将

react-data-table-component

集成到我的 React 应用程序时遇到了运行时错误。当我从 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
    ...

背景：

当我重新加载页面时会出现该错误，虽然有时在第二次重新加载后会解决，但该问题不断重复出现。我的目标是确保来自API的数据可以被访问并在数据表中正确显示。

关于如何解决这个问题有什么建议吗？

Answer 1

您的代码似乎没有任何问题，但您可以通过以下步骤进行故障排除：

1. 直接使用模拟数据设置数据，如果没有问题，请检查您的自定义请求

let mockData = [{...},{...}];
useEffect(() => {
  setTableData(mocKData)
}, [])

2. 升级Node版本，重新安装

   react-data-table-component