React Redux Ant Design Table Data Not Rendered On First Render

Question

I am using React, Ant Design, Redux Toolkit, and rest API using redux store/services file to manage API to develop a table but when loading the page the first time , the table is not rendered or data is fetched, when navigating to a different page and going back to the page the table is rendered and populated with data. Thanks a lot in advance ! Please find my code below:

TABLE.JS

const Table= () => {
     const { data: exchangesList, isFetching } = useGetExchangesQuery();
     const [exchanges, setExchanges] = useState(exchangesList?.data);
     
     
     useEffect(() => {
      if (exchanges) console.log('data is ok ' , exchanges)
      
     }, [exchanges]);

     if (isFetching) return <Loader />;

     const { Column} = Table;

   const modifiedData= exchanges?.map(({name,...exchange}) =>({
    ...exchange ,
    key:exchange.id,
    crypto: name
   }))

      const columns = [  
        {
          title: "Coin",
          key: "coin",
          dataIndex:"symbol",
          render: (text, value) => (
            <span>{value.rank}. ({value.symbol}) {value.crypto}</span>
          )
               },
        {
          title: "Price (USD)",
          dataIndex: "priceUsd",
          render: (text, value) => (
            `$${ millify(value.priceUsd,{precision:4,})}`
          )
        },
        {
          title: "Market Cap",
          dataIndex: "marketCapUsd",
          render: (text, value) => (
            `$${ millify(value.marketCapUsd,{precision:2,})}`
          )
        },
        {
          title: "Change",
          dataIndex: "changePercent24Hr",
          render: (text, value) => (
           `${millify(value.changePercent24Hr,{precision:2,} )}%`
          )
        },

        {
          title: "Supply",
          dataIndex: "supply",
          render: (text, value) => (
           `${millify(value.supply,{precision:3,} )}`
          )
        }
      ]

      if (!loading)
      return (
      
        <>
          <Table className='exchanges-table'   columns={columns} dataSource={modifiedData}/>
      
        </>
   );
};

export default Table;

score 0 · Answer 1 · answered Oct 07 '22 at 18:45

So I assume the 1st hook makes a request and you're getting exchangesList when it updates. And that exchangeList is the starting value of exchanges in the useState you put. And that exchanges variable is used in modifiedData function to transform it and is then fed to the Table component.

Asuming the hook makes an async request and later updates exchangeList its default value would be undefined/null/default-whatever. At no point in your code is setExchanges called, so exchanges never updates and remains undefined so modifiedData won't have an array to map, and the table component doesn't have anything to work with.

Try logging/checking the dev tools if exchanges variable updates at any point. You most likely need to invoke setExchanges upon exchangesList's update.

So something like:

    useEffect(() => {
        setExchanges(exchangesList.data);
    }, [exchangesList]);

React Redux Ant Design Table Data Not Rendered On First Render

1 Answers1