从数组映射函数的async / await返回值

Question

在弄清楚如何使以下代码在javascript / react中工作时遇到麻烦；

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

我有两个API调用返回数组，一个包含订单，另一个包含供应商信息。我正在尝试从订单数组中找到vendor_id，从供应商数组中找到一个名称。

<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新手）。大多数情况下，代码会失败，因为find函数需要一段时间才能找到信息。

Answer 1

原因 JavaScript的map函数可用于数组，并且最初this.state.data是未定义的，直到获得来自ajax请求的响应为止。

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