Question

代码如下：

   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>
   )

错误是：Cannot read property '_currentElement' of null

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

如果在try catch之外添加一个返回，它将会成功。

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

我可能会如何重构上面的代码？

其他相关信息：

使用材质UI Tiles
使用外部API调用返回一个对象数组，因此返回地图
返回每个对象的tile，并成为gridList的一部分。

Answer 1

我认为try/catch并不是真正的问题。需要考虑的一些事项：

您不应该在render函数中进行API调用。这将导致它在组件重新渲染时随时多次请求。
您的API调用是异步的，因此您需要等待响应以获取所需的数据。

异步位是造成我认为的当前错误的原因，因为.map在请求完成之前没有任何数据。

-

你应该做的是：

从componentDidMount
使用setState设置组件状态的响应数据，然后呈现该结果。

更好的方法是使用redux之类的东西来维护你的应用程序状态。

React - 不能在.map中使用Try Catch块（从try catch中返回jsx）

1 个答案: