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

マップは、変換を適用する配列内のすべての要素を呼び出すように設計されています。

最初の要素をレンダリングしたい場合は、最初の要素this.state.data [0]を明示的に呼び出すか、headのようなメソッドをサポートするライブラリを使用することをお勧めします。

Lodash例

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