Question

无法读取 null 的 URL 属性，从 API 中获取

2021-01-09

98

javascript reactjs

我有 JSON 格式的产品，它们被提取并显示在前端。在我的 products.json 中，每个产品都有一个图片 URL，但只有一些产品有图片 URL，其他产品为空。当我在 React 中循环数据时，我的 React 应用程序中总是出现错误，提示无法读取 <img/> 标签中的 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>

Answer 1

将您的

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

替换为

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

仅当 item.photo 不为空时才会呈现 img 元素。

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