I am trying to create a simple table using the data i recieve from the backend from an API call using Ant design in React. I am using Ant design version :

"antd": "^5.1.1",

I am making a simple api call to my backend and storing the result in a state, then tring to use the state itself or using another function to make the api call by itself, and store the value if i get a response, or just return an empty array. I am not able to figure what possibly is throwing the error:

Uncaught TypeError: rawData.some is not a function at Table.js:89:1 at mountMemo (react-dom.development.js:15442:1)

  const getTableData = useCallback(async () => {
    const data = (await retrieveGRNASN(GRNid) ?? []);
    console.log('data', data);
    return data;
  },);


....


// this is my table call
<Table dataSource={getTableData()}
       columns={columns}
       size="small"
       pagination={false} />

I searched multiple solutions on stackoverflow for similar problems but nothing is helping me. I am not even sure if i am getting closer also as the whole page crashes with the same error.

I am trying to create a simple table using the data i recieve from the backend from an API call using Ant design in React. I am using Ant design version :

"antd": "^5.1.1",

I am making a simple api call to my backend and storing the result in a state, then tring to use the state itself or using another function to make the api call by itself, and store the value if i get a response, or just return an empty array. I am not able to figure what possibly is throwing the error:

Uncaught TypeError: rawData.some is not a function at Table.js:89:1 at mountMemo (react-dom.development.js:15442:1)

  const getTableData = useCallback(async () => {
    const data = (await retrieveGRNASN(GRNid) ?? []);
    console.log('data', data);
    return data;
  },);


....


// this is my table call
<Table dataSource={getTableData()}
       columns={columns}
       size="small"
       pagination={false} />

I searched multiple solutions on stackoverflow for similar problems but nothing is helping me. I am not even sure if i am getting closer also as the whole page crashes with the same error.

• javascript
• reactjs
• antd

3 Answers 3

A bit after the fact, but have you verified your server response actually contains an array? I've just been using Mockroon with code similar to yours, and my JSON was not a valid array. Same error.

getTableData() will return a promise, but the prop dataSource expects it to be an array.

So promise does not have the some method.

Instead of that you should have a state of the TableData and when the promise is resolved it should be updated with the data.

import { useState, useEffect } from "react";
export default function App() {
  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    const getTableData = async () => {
      const data = await retrieveGRNASN(GRNid);
      if (data) setTableData(data);
    };
    getTableData();
  }, []);

  return (
    <div className="App">
      <Table
        dataSource={tableData}
        columns={columns}
        size="small"
        pagination={false}
      />
    </div>
  );
}

I am trying to solve this from last 3 days it just 2 simple thing mistake if you declare columns key should declare same in data-list, many times in react ponent where we have to take column data and data-list both take object not array.

So try to make sure that react ponent should take array not object .