Uncaught TypeError: rawData.some is not a function REACT/ANTDESIGN

Question

I am trying to solve this problem almost for 1 day. I considered every possible solution, have been searching for a long time, but really have no idea what's wrong.

I need to make table with ant design and on initial rendering all the users should be displayed. I am using React / TypeScript, Axios and Zustand for state management. The problem is, that everything was working perfectly, I fetched data and it was working, but then out of nowhere I got that error "uncaught TypeError: rawData.some is not a function".

my Store.tsx

My Table component:

import {Table} from "antd";
import userStore from "./Store/Store";
import { useEffect} from "react";

const usersTable = () => {
  const { users, loading, error, fetchUsers} = userStore();

  useEffect(()=>{
    fetchUsers();
 }, [])

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Email',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: 'Gender',
      dataIndex: 'gender',
      key: 'gender',
    },
    {
      title: 'Street',
      dataIndex: ['address', 'street'],
      key: 'street',
    },
    {
      title: 'City',
      dataIndex: ['address', 'city'],
      key: 'city',
    },
    {
      title: 'Phone',
      dataIndex: 'phone',
      key: 'phone',
    },
  ];

if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }
  
  return (
    <>
    <Table dataSource={users} columns={columns}/>
    </>
  )
}

export default usersTable

I checked everything in my code, I don't have explicitly defined rawData anywhere of course.

Answer 1

I was facing a same issue, upon investigation i found my dataSource was set to Object.

antd's Table expects dataSource to be an Array of Object and not direct Objects

Reference: https://ant.design/components/table#how-to-use

I updated my dataSource to an array and it worked.

Before:

let columns = [];
  let dataSource = [];
  if (order) {
    columns = Object.keys(order).map((key) => ({
      title: key.replace(/_/g, ' ').toUpperCase(),
      dataIndex: key,
      key: key,
    }));

    dataSource = {...order};
    delete dataSource.service;
    delete dataSource.messages;
  }

After:

let columns = [];
  let dataSource = [];
  if (order) {
    columns = Object.keys(order).map((key) => ({
      title: key.replace(/_/g, ' ').toUpperCase(),
      dataIndex: key,
      key: key,
    }));

    dataSource = [ {...order}];
    delete dataSource.service;
    delete dataSource.messages;
  }

in your case just make sure your users is an array not object.

Answer 2

I once had faced this similar issue and it was due to the following reason. It might be because you have defined an attribute in the table whose dataIndex does not exist. Please check the corresponding dataIndex of each attribute defined in the columns array and see if it matches the attribute names defined in table users.