React产品列表渲染：解决图片URL为空/Null引发的Cannot read property of null错误及实现条件渲染

这个问题我碰到过好多次啦，核心原因就是当items.photo为空（null/空字符串）时，React尝试渲染一个src属性无效的<img>标签，从而抛出"Cannot read property of null"的错误。咱们用条件渲染就能完美解决，只在图片URL有效时才渲染图片，否则返回空div。

修改后的完整代码： #

<ul>
  {this.state.items.map((item, index) => {
    return (
      <li className="ProductList-product" key={item.id}>
        <h3>{item.title}</h3>
        <p>{item.description}</p>
        <div className="price-box">
          <p>from: {item.price} $</p>
        </div>
        <div>
          {/* 条件渲染：仅当photo存在且非空时渲染img，否则返回空div */}
          {item.photo && item.photo.trim() ? (
            <img src={item.photo} alt={item.title} />
          ) : (
            <div></div>
          )}
        </div>
      </li>
    );
  })}
</ul>

关键细节说明： #

• 我把循环变量从items改成了item（单复数更合理，避免和外层的this.state.items混淆）
• 使用item.photo && item.photo.trim()来双重校验：既确保item.photo不是null/undefined，又确保它不是空字符串（避免空格组成的无效URL）
• 给<img>的alt属性设置了item.title，这比空字符串更符合无障碍访问的规范
• 当条件不满足时，返回<div></div>，完全符合你的需求

这样修改后，就不会再出现因为图片URL为空导致的报错啦。

内容的提问来源于stack exchange，提问作者user8317490