React项目中react-data-table-component报"Pt.slice is not a function"错误排查

错误根源 #

"Pt.slice is not a function" 错误本质是 react-data-table-component 要求 data 属性必须是数组类型，但你当前传递的是API返回的完整响应对象（非数组），对象没有 slice 方法，导致表格内部处理数据时抛出错误。

具体修复点 #

• 修正API数据赋值：https://dummyjson.com/users 返回的结构是 { users: [...], total: ..., skip: ..., limit: ... }，需要提取其中的 users 数组赋值给 data。
• 修正Name列的渲染逻辑：用户数据中 firstName 和 lastName 是同级字段，原写法 row.firstName.lastName 会读取undefined的属性，引发错误，需改为拼接两个字段。
• 完善useMemo的使用：columns 的 useMemo 缺少依赖数组，添加空数组确保列配置只初始化一次，符合React Hooks最佳实践。
• 补充分页默认值：paginationDefaultPage 需要传入具体数值，否则会引发参数警告。

修正后的完整代码 #

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

export default function TableData() {
  const [loadingData, setLoadingData] = useState(true);
  const columns = useMemo(() => [
    {
      name: "Id",
      selector: row => row.id,
      accessor: "id",
    },
    {
        name: "Name",
        selector: row => `${row.firstName} ${row.lastName}`,
    },
  ], []);

  const [data, setData] = useState([]);
  useEffect(() => {
    async function getData() {
      try {
        const response = await axios.get("https://dummyjson.com/users");
        setData(response.data.users);
        setLoadingData(false);
      } catch (error) {
        console.error('数据获取失败:', error);
        setLoadingData(false);
      }
    }
    if (loadingData) {
      getData();
    }
  }, []);

  return (
    <div>
      <div className="w-full pt-5">
        {loadingData ? (
          <p className="w-full text-center">Loading... </p>
        ):(
          <DataTable
            columns={columns}
            data={data}
            selectableRows
            pagination
            paginationDefaultPage={1}
          />
        )}
      </div>
    </div>
  );
}

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