0

I'm using React Hooks, to asynchronous fetching data from database and showing them with Ant Design Table. In my code, the dataSource array (a state variable) does update, but Ant Design table does not. I realy need some help, Thanks.

I tried these answers, and unfortunately I could not solve my problem.

The useState set method is not reflecting a change immediately

React Hook useState Not Updating UI

my code is as follows:

const RequestList = ({ user }) => {
  const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
    async function startFetching() {
      const { data: _dataSource } = await getRequests();
      setDataSource((dataSource) => [...dataSource, ..._dataSource]);
    }
    startFetching();
  }, []);
  
  // ...
  
  return <Table dataSource={dataSource} columns={columns} />;
};

export default RequestList;
Mahdi
  • 89
  • 1
  • 9
  • It's likely that you're getting an error thrown somewhere inside your `useEffect()`. One of the problems of this way of doing things is that it's very easy to lose errors because they just get thrown and never caught, and they might not even appear in console. Try adding some try/catch blocks in your function. – Duncan Thacker Jul 18 '23 at 16:45
  • Another good technique for React applications is to wrap the whole thing in an error boundary, and then use an asynchronous hook like `useAsync` which will help you rethrow asynchronous errors. – Duncan Thacker Jul 18 '23 at 16:45
  • please add how you configuring the columns and the structure of dataSource with your question. – Nazrul Chowdhury Jul 18 '23 at 17:05

1 Answers1

0

please try this way, wrapping with a condition:

return {dataSource && <Table dataSource={dataSource} columns={columns} />}
rnewed_user
  • 1,386
  • 7
  • 13