调用Strapi API返回image为null时如何替换为占位图避免报错

问题根因 #

你代码的问题在于当image字段本身为null时，直接访问image.url会直接抛出类型错误，无法触发后续||的 fallback 逻辑。

解决方案 #

方案1：使用可选链操作符（推荐，ES2020+支持）

在访问url前先判断image是否存在，可选链?.会在左侧值为null/undefined时直接返回undefined，从而触发后面的占位图逻辑：

{items.map(function(item){
 const {id, name, image} = item;
  return <MyCard 
    key={id} 
    id={id} 
    name={name} 
    image={image?.url || 'https://via.placeholder.com/300'} 
  />
})}

方案2：兼容低版本ES的写法

如果你的运行环境不支持可选链，可以用逻辑与先判断image是否存在：

{items.map(function(item){
 const {id, name, image} = item;
  return <MyCard 
    key={id} 
    id={id} 
    name={name} 
    image={image && image.url ? image.url : 'https://via.placeholder.com/300'} 
  />
})}

额外优化：组件内加兜底逻辑 #

你也可以同时在MyCard组件内加一层 fallback 避免其他场景传值异常：

function MyCard({id, name, image}){
    return(
        <>
            <Card>
                <Card.Header>
                    <Card.Img src={image || 'https://via.placeholder.com/300'} alt={name}/>
                </Card.Header>
                <Card.Body>
                    <Card.Title>{name}</Card.Title>
                </Card.Body>
            </Card>
        </>
    )
}

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