如何在Array.map遍历数组对象时返回首个满足条件的结果？

别用map（它会遍历整个数组，返回所有符合条件的结果），改用find方法定位第一个满足条件的对象，再渲染对应的组件：

1. 定位首个符合条件的对象 #

用find遍历数组，返回第一个type === "x"的元素：

const firstMatchItem = results.find(item => item.type === "x");

2. 渲染目标组件 #

在JSX里判断对象是否存在，存在则渲染iframe：

{firstMatchItem && <iframe src={firstMatchItem.key} />}

关于item[0].key报错的原因 #

你之前代码里的item是数组中的单个元素，不是数组本身，所以item[0]根本不存在，自然返回undefined。而find会直接帮你拿到第一个符合条件的元素，直接取它的key即可。

内容的提问来源于stack exchange，提问作者Brandon.b