Отладка панели поиска в реальном времени в ReactJS

Question

Я разрабатываю приложение Rails, которое рисует данные через вызов AJAX API Spotify и отображает эти данные через прямую панель поиска, которую я создал с помощью ReactJS.

Мой главный компонент называется SearchController, и здесь выполняется вызов AJAX и устанавливается на данные на основе текста поиска, который вводит пользователь. Затем эти данные передаются на два небольших компонента SearchBar и SearchResultsList.

Моя проблема заключается в рендеринге результатов в компоненте 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 результатов вместо полных 3 пространств, указанных в renderAlbum возвращающих его вызывает ошибку.

В моем блоке данных this.props.album данных возвращается целочисленное целое число, и я чувствую, что это может быть полезно с точки зрения циклирования данных и, возможно, для установки целого числа, которое я вызываю в каждом раскрывающемся списке -это так, чтобы вернуть столько результатов, сколько я получаю от своего вызова Ajax.

В любом случае, любая помощь будет оценена по достоинству. Не так остро, как JavaScript, как Ruby, и хотя я чувствую, что нахожусь на правильном пути, я определенно мог бы использовать руку.

Answer 1

вместо возвращения <ul>, который всегда предполагает, что он будет иметь 3 детей, почему бы не превратить каждый объект в this.props.albums.albums.items в <li> напрямую (не используйте <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> 

это будет работать для массивов с любым количеством элементов.