How can we get/rerender async data in ANT D Column

I need to fetch the data from ant d table column using the text in the column and rerender the result but my code isn’t working it this possible ?

const columns = [
    {
        title: "Stocks On Hand",
        dataIndex: "key",
        width: "33.333333333%",
        render: async function render(text) {
            //console.log(warehouse)
            const data =  await dispatch(getStocksDetails(text,warehouse))
            // console.log(data)
            return (
                <>
                   {
                      <Text>{data.qty}</Text>
                   }
                </>
            )
        },
    }, 

no data is being displayed

Answer

You can consider storing the entire column data into the component state. Then let the async function modify that state, so when the promise is resolved, it will update the state and trigger a rerender for your entire column.

The catch is you will need to manually handle the loading state of your table component since the stable version of the Suspense API does not support data-fetching at the moment.

It goes something like

const MyComponent = () => {
  const [data, setData] = useState([]);
  const asyncFn = async () => {
    // do your data fetching here
    await fetchDataStuff().then((response)=>setData(response));
  }
  
  useEffect(()=> {
      asyncFn();
  }, [asyncFn]);

  return (<column>{data}</column>);

}

Edit: I added the useEffect dependency to prevent the component from fetching data at every render.