0

我有一个 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", orders[i].id, "?$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>
  ))}
</>
)

如何映射我的数据数组？

4

1 回答 1

2

您很可能不想在每次渲染时调用 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>
      ))}
    </>
  );
};
于 2021-06-15T17:22:08.150 回答