React：如何从嵌套对象数组中单独渲染主图及其他图片

一、单独渲染mainImg #

你的数据结构里，images数组中只有第一个元素包含mainImg属性，不需要遍历整个数组，直接用find方法定位到该元素即可：

// 找到包含mainImg属性的对象
const mainImageObj = data.images.find(img => 'mainImg' in img);
// 渲染主图（加判断避免找不到时报错）
{mainImageObj && <img src={mainImageObj.mainImg} className={styles.mainImg} />}

这样只会生成一张主图标签，不会出现控制台里多余的无效img节点。

二、渲染除mainImg外的其他图片 #

剩余图片都是单键值对的对象（比如{img1: 'url'}），先过滤掉主图对象，再提取每个对象里的URL值：

{data.images
  .filter(img => !('mainImg' in img)) // 过滤掉含mainImg的对象
  .map((img, index) => {
    // 提取对象里的唯一URL值
    const imgUrl = Object.values(img)[0];
    return <img key={`other-img-${index}`} src={imgUrl} />;
  })
}

之前方法无效的原因 #

• 遍历整个images数组渲染主图时，会给每个元素都生成img标签，只有第一个元素有有效src，其余都是undefined，所以控制台会出现无效节点。
• 过滤时用img.mainImg != project.images.mainImg完全错误：一是除主图外的对象根本没有mainImg属性，二是project变量未定义；另外直接把img对象传给src，React无法识别为URL，必须提取对象内的具体值。

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