与 TypeScript 反应 - 映射在 for 循环内返回的承诺数组

问题描述

我有一个 for 循环，它多次调用数据库 API。这些调用返回菜单的数据，但是当我尝试映射数组时，我无法执行此操作，因为数组为空。

第一个场景：

const { context,orders } = props
let Data:any = []
for (let i=0; i < orders.length; i++) {
  context.webAPI.retrieveRecord("entity",orders[i].id,"?$select=colum").then(
    (result:any) => {
      const obj:any = {
        name: result.column.name
      }
      Data.push(obj)
    }
  )
}

return (
<>
  {Data.map((item:any,idx:any) => (
    <div>
      <ProgressBar key={idx} name={item.name} />
    </div>
  ))}
</>
)

我意识到这是因为 API 是异步行为，但是当我尝试使用 promise 时，我遇到了 map 的新问题...我无法映射 promise。

第二种情况：

async function getData(context:any,orders:any) {
  for (let i=0; i < orders.length; i++) {
    context.webAPI.retrieveRecord("entity","?$select=colum").then(
      (result:any) => {
        const obj:any = {
          name: result.column.name
        }
        Data.push(obj)
      }
    )
  }
  return Data
}

let Data:any = async () => getData(context,orders)

return (
<>
  {Data.map((item:any,idx:any) => (
    <div>
      <ProgressBar key={idx} name={item.name} />
    </div>
  ))}
</>
)

如何映射我的数据数组？

解决方法

您很可能不想在每次渲染时调用 getData，因此您应该将响应存储在某处，它可能处于组件状态：

import React,{ useEffect,useState } from "react";

const YourReactComponent = () => {
  const [Data,setData] = useState([]);

  async function getData(context,orders) {
    for (let i = 0; i < orders.length; i++) {
      context.webAPI
        .retrieveRecord("entity",orders[i].id,"?$select=colum")
        .then((result) => {
          const obj = {
            name: result.column.name,};
          setData((prevData) => [...prevData,obj]);
        });
    }
  }

  useEffect(() => {
    getData(context,orders);
  },[]);

  return (
    <>
      {/* if your compiler doesn't support conditional chaining,try using Data && Data.map... */}
      {Data?.map((item,idx) => (
        <div>
          <ProgressBar key={idx} name={item.name} />
        </div>
      ))}
    </>
  );
};