JSX 只映射数组中的第一个对象

Question

我很好奇如何在 JSX 中使用 .map 只渲染数组中的第一个对象。

{this.state.data.map(data =>
    <span className="fooBar">
        <a href={data.foo}>{data.bar}</a>
    </span>
)}

谢谢！

Answer 1

最简单的解决方案就是完全不使用 .map！

<span className="fooBar">
    <a href={this.state.data[0].foo}>{this.state.data[0].bar}</a>
</span>

.map 将始终遍历数组中的每个对象 - 无法提前突破它。

Answer 2

Map 旨在调用应用转换的数组中的每个元素。

如果您只想渲染第一个元素，那么您最好显式调用第一个元素 this.state.data[0] 或使用支持 head 等方法的库。

Lodash 示例

const link = _.head(this.state.data);
<span className="fooBar">
  <a href={link.href}>{link.title}</a>
</span>

Answer 3

此解决方案工作正常。

{data.map((data, i) =>
    <span className="fooBar">
        <a href={data.foo}>{data.bar}</a>
    </span>
)[0]}

JSX map only the first object in array