我们如何在 ANT D 列中获取/重新呈现异步数据

Question

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 1

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.