我们如何获取/重新渲染 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 = () => {

  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>);

}

编辑：我添加了useEffect依赖项以防止组件在每次渲染时获取数据。