Reactjs 如何映射表上的3个不同对象

我试图映射调用API时得到的3个不同对象

目标是异步打印，一次打印一个页面，这样页面就不会花费很多时间来加载

只有一个调用可以获取这些对象，它是对动态URL的调用，因此我更改了循环中的参数并得到了响应

对象如下所示：

对象1

{
  Name: one
  Group: one
}

对象2

{
  Name: two
  Group: two
}

对象3

{
  Name: three
  Group: three
}

我试图实现的是每行映射一个对象，就像一个表：

Name: one     Group: one
Name: two     Group: two
Name: three   Group: three

相反，我把它们放在同一条线上。对象从第一个更改为最后一个。最后一个保持不变，就好像迭代了所有这些，并在最后一个停止一样

我对API的调用：

导出默认函数计算机{data}{ 常量类=使用样式 常量样式=样式； const name_Machines=data.maprow=>{ 返回row.name； }; const resource_group=data.maprow=>{ 返回row.resource\u组； }; 让url const[MachinesRow，setMachinesRow]=React.useState[] React.useffect=>{ resource_group.forEachkeyword，索引=>{ url=/api/machine/+关键字+/+名称\机器[索引] 获取URL{ 方法：获取， 标题：{ 内容类型：application/json， 授权：Bearer+window.localStorage.getItemaccess\u令牌， }, } .thenresp=>{ 返回resp.json } .thendata=>{ setMachinesRow[…MachinesRow，…[数据]] } .catcherror=>{ 控制台日志错误 window.localStorage.removietemaccess\u令牌 window.location.replace/ } } }, [] 我的代码：

回来 Azure机器 名称 资源组 地方 地位 {MachinesRow.maprow=> {row.name} {row.resource_group} {row.location} } }

---

将回调函数设置为调用时：

setMachinesRow([...MachinesRow, ...[data]])

您正在使用原始MachinesRow创建一个新的数组对象，该MachinesRow是一个空数组对象，您可以从同一范围创建所有3个回调。这样做3次将留下最后一个数据集，因为每个数据集都将用空数据+请求结果替换上一个数据集

编辑

改为这样做

React.useEffect(() => {
    const resultsPromise = resource_group.map((keyword, index) => {
        url = "/api/machine/" + keyword + "/" + name_Machines[index]
        return fetch(url, {...})
            .then(resp => resp.json())
            .catch(error => {
                console.log(error)
                window.localStorage.removeItem("access_token")
                window.location.replace("/")
            })
    })

    Promise.all(resultsPromise).then(results => setMachinesRow([...MachinesRow, ...results]));
}, [])

---

您可能需要根据结果处理数据，这只是一个示例，说明如何将您的所有数据放在一个位置

嗨，Gabriel，我是一个新的反应者，这对我来说是非常先进的，有什么办法解决它？获取所有api调用并将它们打印在一张表上。@PatrickJosé让他在教你如何钓鱼的同时给你鱼=。@ilkerkaran如果我理解他说的话，我会这么做，这里的问题是我对这种语言非常熟悉，我可以从其他示例中看出，还有简单的事情：@Gabriel，但那样的话，呼叫将全部在同一个数组中，不是吗？我试图实现的是一个异步调用，一次一个，这样页面就会加载faster@PatrickJos“是的，您应该使用自己的对象作为fetch的第二个参数，”他这样写道，以缩短代码