我们如何获取/重新渲染 ANT D 列中的异步数据

Question

我需要使用列中的文本从 ant d 表列中获取数据并重新渲染结果，但我的代码无法正常工作？

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>

                   }

                </>

            )

        },

    }, 

没有显示任何数据

Answer 1

您可以考虑将整个列数据存储到组件状态中。然后让异步函数修改该状态，这样当承诺得到解决时，它将更新状态并触发整个列的重新渲染。问题是您需要手动处理表组件的加载状态，因为稳定版本的 Suspense API 目前不支持数据获取。它是这样的const MyComponent = () => {&nbsp; const [data, setData] = useState([]);&nbsp; const asyncFn = async () => {&nbsp; &nbsp; // do your data fetching here&nbsp; &nbsp; await fetchDataStuff().then((response)=>setData(response));&nbsp; }&nbsp;&nbsp;&nbsp; useEffect(()=> {&nbsp; &nbsp; &nbsp; asyncFn();&nbsp; }, [asyncFn]);&nbsp; return (<column>{data}</column>);}编辑：我添加了useEffect依赖项以防止组件在每次渲染时获取数据。