Reactjs：无法读取 null 的 URL 属性，从 API 获取答案

【问题标题】：Reactjs: Cannot read URL property of null, fetching from an APIReactjs：无法读取 null 的 URL 属性，从 API 获取
【发布时间】：2021-01-09 10:25:52
【问题描述】：

我有 json 格式的产品，这些产品被提取并显示在前端。在我的 products.json 中，每个产品都有一个图像 url，但只有一些有图像 url，其他是空的。当我在反应中循环数据时，我的反应应用程序中总是出现错误，说无法读取标签中的 null 属性，我该如何编写一个仅在有图像源时才呈现图像的逻辑，否则只返回一个空的 div？

<ul>
          {this.state.items.map((items, index) => {
            return (
              <li className="ProductList-product" key={items.id}>
                  <h3>{items.title}</h3>
                  <p>{items.description}</p>
                  <div className="price-box">    
                  <p>from: {items.price} $</p>
                  </div>
                  <div>
                  {<img src={items.photo} alt=""/>}
                  {/* {console.log(items.photo.id)} */}
                  </div>
              </li>
                
            );
          })}
        </ul>

【问题讨论】：

惯例是循环内的子项为单数。在你的情况下 items=>item

标签： javascript reactjs api fetch

【解决方案1】：

更换你的

{<img src={items.photo} alt=""/>}

与

{items.photo && <img src={items.photo} alt=""/>}

只有当 item.photo 不为空时才会渲染 img 元素。

【讨论】：

【解决方案2】：

您可以设置条件。例如：

  <ul>
      {this.state.items.map((items, index) => {
        return (
          <li className="ProductList-product" key={items.id}>
              <h3>{items.title}</h3>
              <p>{items.description}</p>
              <div className="price-box">    
              <p>from: {items.price} $</p>
              </div>
              {items.photo
              ? <div>
                  {<img src={items.photo} alt=""/>}
                  {/* {console.log(items.photo.id)} */}
              </div>
              : <div></div>
          </li>
            
        );
      })}
  </ul>

【讨论】：