我如何处理 React 中的未定义错误

Question

我正在尝试显示从 API 收到的数据，显示包含图像的产品，但是当我尝试分页时，我总是收到此错误，因为其他图像不包含图像。

我正在使用 Api-平台，这是我的 json 结构

{
   "@context": "/api/contexts/Product",
   "@id": "/api/products",
   "@type": "hydra:Collection",
   "hydra:member": [
       {
           "@id": "/api/products/1",
           "@type": "Product",
           "id": 1,
           "title": "Labore velit unde iste consequatur.",
           "description": "",
           "price": 5644,
           "published": "2019-12-27T04:51:04+01:00",
           "user": {
               "@id": "/api/users/2",
               "@type": "User",
               "username": "manager",
               "phone": "09 54 03 76 16"
           },
           "images": [
               {
                   "@id": "/api/images/1",
                   "@type": "Image",
                   "id": 1,
                   "file": null,
                   "url": "/images/5e2a25820eac1350286144.jpg"
               },
               {
                   "@id": "/api/images/2",
                   "@type": "Image",
                   "id": 2,
                   "file": null,
                   "url": "/images/5e2a258e5afde569450008.png"
               },
               {
                   "@id": "/api/images/3",
                   "@type": "Image",
                   "id": 3,
                   "file": null,
                   "url": "/images/5e2a25988e0b7943696558.jpg"
               }
           ]
       }
}

这是我的代码

<div className="row mt-md-5 mt-sm-5" >
    {products && products.map(product => (
        <div className="col-md-3" key={product.id}>
            <div className="card mb-3">
               <div className="card-body">
                    <img src={`http://localhost:8000/${product.images[0].url}`} width="200px"
                         alt="images"
                    />                               
                    <p className="card-title">
                        {product.description}
                    </p>
                </div>
            </div>
        </div>

    ))}

</div>

Answer 1

将此添加到您的 jsx：

                {product.images && product.images[0] && <img src={`http://localhost:8000/${product.images[0].url}`} width="200px"
                     alt="images"
                /> }

如果 img 不存在则不会渲染它

Answer 2

首先检查图像是否存在，如下所示：

{
product.images && <img src={`http://localhost:8000/${product.images[0].url}`} width="200px"alt="images" />    
}

Answer 3

图片不可用时隐藏。

<div className="row mt-md-5 mt-sm-5" >
    {products && products.map(product => (
        <div className="col-md-3" key={product.id}>
            <div className="card mb-3">
               <div className="card-body">
                 {
                   product.images[0] ?
                   <img src={`http://localhost:8000/${product.images[0].url}`} width="200px" alt="images" /> :
                   null
                  }        
                    <p className="card-title">
                        {product.description}
                    </p>
                </div>
            </div>
        </div>

    ))}

</div>

我如何处理 React 中的未定义错误

How can i handle the undefined error in React

javascript

reactjs

api-platform.com