JSX сопоставляет только первый объект в массиве

Question

Мне интересно, как визуализировать только первый объект в массиве, используя .map в JSX.

{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

Это решение работает правильно.

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

Answer 3

Карта предназначена для вызова каждого элемента в массиве с применением преобразования.

Если вы просто хотите визуализировать первый, вам лучше либо явно вызвать первый элемент this.state.data[0], либо использовать библиотеку, которая поддерживает такой метод, как head.

Пример Лодаша

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