React调用API赋值图片src失败，image为undefined问题求助

问题原因 #

你调用的猫咪品种接口返回的条目里，部分品种对象不存在image字段，直接访问image.url时就会因为image为undefined抛出异常。

修复方案 #

方案1：增加属性兜底，保留全部条目 #

使用ES6可选链语法访问嵌套属性，同时给图片地址设置兜底值，避免渲染报错：

const Cat = ({
  cat: {name, image},
}) => {
  return(
    <div className='catMain'>
      <div className='catImage'>
        {/* 可选链判断image是否存在，不存在时使用占位图 */}
        <img src={image?.url || '你的占位图地址'} alt={name} />
      </div>
    </div>
  )
}

方案2：过滤无图条目，只展示有配图的品种 #

如果你不需要展示无配图的品种，可以在遍历渲染前先做一层过滤：

render() {
  return (
    <div className='main'>
      <div className="cats">
        <div className="catsInfo">
          {/* 先过滤掉没有image字段的条目再遍历 */}
          {this.state.data.filter(cat => cat.image).map((cat) => (
            <Cat cat={cat} key={cat.id}/>
          ))}
        </div>
      </div>
    </div>
  )
}

额外提示：遍历列表组件时记得加上唯一key属性，避免React抛出遍历key相关的警告。

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