如何解决与 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>
))}
</>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。