javascript - React with TypeScript - 映射在 for 循环中返回的一组 promise
问题描述
我有一个 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>
))}
</>
)
如何映射我的数据数组?
解决方案
您很可能不想在每次渲染时调用 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>
))}
</>
);
};
推荐阅读
- amazon-web-services - 如何将视频从 kinesis 视频流传输到 AWS Rekognition 并对该视频执行数据分析?
- c# - 是否有人有用于聊天的 Listview 渲染器
- macos - 在 Parallels 上在 MBP 上运行 Windows 混合现实
- kubernetes - 配置 Microk8s
- sql - 从行之间的差异中获取总计
- android - TabLayout 或 DatePicker - 切换选项卡不更新,与 DatePicker 相同
- javascript - Chart.JS:当条形宽度足以容纳文本时,如何仅显示数据标签?
- python-3.x - 调用创建按钮功能时如何提供按钮 ID
- groovy - 如何使用groovy根据给定作业的构建号取消詹金斯构建
- message-queue - 在新消息停止接收后通知订阅者