ReactJSのライブ検索バーのデバッグ

Question

私はSpotifyのAPIに対するAJAX呼び出しを介してデータを描画し、ReactJSを使用して作成したライブ検索バーを介してそのデータをレンダリングするRailsアプリケーションを開発しています。

私のトップコンポーネントはSearchControllerというタイトルで、AJAX呼び出しが行われ、ユーザーが入力した検索テキストに基づいてデータに設定されます。そのデータは、SearchBarとSearchResultsListの2つの小さなコンポーネントに渡されます。

私の問題は、SearchResultListコンポーネントで結果をレンダリングする際に発生します。ここで

は私のコードです：

class SearchResultsList extends Component { 
    render(){ 
    return (
     <ul className="dropdown-menu" id="autocomplete-items"> 
     {this.renderAlbums()} 
     </ul> 
    ); 
    }; 

    renderAlbums(){ 
    if (this.props.albums === undefined) { 
     return '' 
    } else { 
     return (
     <ul> 
      <div className="dropdown-item">{this.props.albums.albums.items[0].name}</div> 
      <div className="dropdown-item">{this.props.albums.albums.items[1].name}</div> 
      <div className="dropdown-item">{this.props.albums.albums.items[2].name}</div> 
      <div className="dropdown-item"><a href="/albums/new">Or add it yourself</a></div> 
     </ul> 
    ); 
    }; 
    }; 
} 

それは機能的ですが、コールが唯一の1つのまたは2の結果の代わりに、renderAlbumに指定された完全な3つのスペースがそれを返す返された場合、私はその中の特定の問題に実行していますよエラーが発生します。

this.props.albumブロックのデータに返される合計結果の整数があり、データをループして、おそらく各ドロップダウンで呼び出している整数を設定するのに役立つかのように感じます私が実際にAjaxコールから得ているものと同じように多くの結果を返すようにします。

とにかく、助けていただければ幸いです。 Rubyと同じようにJavaScriptではシャープではなく、正しい軌道に乗っているように感じますが、私は間違いなく手を使うことができます。代わりに、常にそれは3人の子供を持つことになりますと仮定し<ul>は、なぜ直接<li>にthis.props.albums.albums.itemsで各オブジェクトをオンにしないで返すの

Answer 1

（<div>を使用していない、それは適切なHTMLはここではありません）？：

<ul> 
    {this.props.albums.albums.items.map(function(album) { 
    return (
     <li className="dropdown-item"> 
     {album.name} 
     </li> 
    ); 
    })} 
    <li>Or add it yourself</li> 
</ul> 

これは任意の数の項目を持つ配列に対して機能します。