Javascript 反应-Can'；t在.map中使用Try-Catch块（从Try-Catch中返回jsx）

代码如下：

   return (
    <MuiThemeProvider>
      <GridList>

      {singleProd.map(function(product) {
        // console.log(product)
        let fileID;

        try {
          api.GetFile(product.relationships.main_image.data.id)

          .then((file) => {
            fileID = file.data.link.href;
            console.log(fileID)

            return (
                <Tile name={product.name} id={product.id} link={fileID} key={product.id} />
            )

          })
        }

        catch(e){
          console.log('product has no main image');

          return (
              <Tile name={product.name} id={product.id} link={fileID} key={product.id} />
          )
        }

      })}
      </GridList>
    </MuiThemeProvider>
   )

返回(
{singleProd.map（函数（产品）{
//console.log（产品）
让fileID；
试一试{
api.GetFile（product.relationships.main\u image.data.id）
。然后（（文件）=>{
fileID=file.data.link.href；
console.log（文件ID）
返回(
)
})
}
捕获（e）{
log（“产品没有主映像”）；
返回(
)
}
})}
)

错误为：

无法读取null的属性“\u currentElement”

到目前为止的诊断是，没有为.map函数返回任何内容，因为返回的内容分别包装在try-catch块中

如果您在try catch之外添加一个return，它将成功

我想知道应该如何格式化它，以便.map中的每个对象都通过try-catch运行。如果尝试成功，则返回并使用该jsx。如果没有，则返回并使用catch jsx

你知道我该如何重构上面的代码吗

其他相关信息：

• 使用材质UI互动程序
• 使用返回对象数组的外部API调用，从而
• 将返回每个对象的平铺，并成为gridList的一部分

---

我认为，try/catch并不是真正的问题。需要考虑的几件事：
• 您不应该在呈现函数内执行API调用。这将导致它在组件重新渲染时多次请求
• 您的API调用是异步的，因此您需要等待响应以获取所需的数据
我认为异步位是导致当前错误的原因，因为在请求完成之前，

.map

没有任何数据
--
你应该做的是：
• 从

  componentDidMount

• 使用

  setState

  将响应数据设置为组件状态，然后呈现该结果

---

更好的方法是使用类似于维护应用程序状态的工具。
感谢您的回答，Austin！我这样做的原因是我们在

componentDidMount

中有一个初始API调用，它以数组的形式检索产品列表。然后，我们需要获取阵列中的每个产品，并通过进一步的API调用获取该产品的文件链接。然后，我们使用数组中的产品信息和文件链接为每个产品创建一个磁贴。我明白了——在这种情况下，两个API调用仍应位于

componentDidMount

，它们应以某种方式组合并添加到组件的

状态。这将比在渲染函数中执行要好得多。