javascript - 异步/等待数组映射函数的返回值

Question

无法弄清楚如何让下面的代码在 javascript/react 中工作；

findSupplierName(supplierId) {
   var object = this.state.supplierData.find(e => e.id === supplierId).name;
   return object;
}

我有两个返回数组的 API 调用，一个包含订单，另一个包含 vendor 信息。我正在尝试将订单数组中的 supplier_id 查找到 vendor 数组中的名称中。

<tbody>
   {this.state.data.map((data, i) =>
   <tr key={i}>
     <td>{data.id}</td>
     <td>{this.findSupplierName(data.supplier_id)}</td>
     <td>{data.date}</td>
     <td>{data.total}</td>
   </tr>)}
</tbody>

我试过使用 async/await，但没弄明白(这里是 Javascript 新手)。大多数情况下，代码会失败，因为查找函数需要一段时间才能找到信息。

Answer 1

原因 JavaScript 的 map 函数与数组一起工作，并且最初 this.state.data 是未定义的，直到它从 ajax 请求获得响应。

您必须切换 async: false。然后将收到请求的数据，其余代码将在收到数据后立即运行。