ReactJS多图片映射不显示及Webstorm报错问题求助

问题根源 #

你写的map回调里，箭头函数用了大括号{}但没有返回JSX元素——React要求map的回调必须返回可渲染的组件，大括号包裹的函数体如果不写return，默认返回undefined，所以浏览器里没有图片渲染，同时IDE会提示「Expression statement is not assignment or call」，因为JSX表达式没有被使用或返回。

修正代码 #

有两种可行写法：

1. 去掉大括号，让箭头函数隐式返回JSX：

{Object.entries(images).map((image, index) => 
  <img 
    src={image[1].default} 
    width="640" 
    height="480" 
    id={`image${index}`} 
    alt={`image${index}`} 
    key={index} 
  />
)}

2. 保留大括号，添加显式return语句：

{Object.entries(images).map((image, index) => {
  return <img 
    src={image[1].default} 
    width="640" 
    height="480" 
    id={`image${index}`} 
    alt={`image${index}`} 
    key={index} 
  />
})}

额外提示 #

• 必须给map渲染的元素加上key属性（示例用了index，如果图片有唯一ID，优先用唯一ID），避免React的控制台警告。
• 确认images的结构：Object.entries(images)返回的是[键名, 图片模块]数组，image[1].default要对应正确的图片资源路径（比如批量import的图片确实会通过default暴露资源地址）。

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