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>