javascript - 在 ReactJS 中调试实时搜索栏

Question

我正在开发一个 Rails 应用程序，它通过 AJAX 调用 Spotify 的 API 来绘制数据，并通过我使用 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 个结果，而不是 renderAlbum 返回中指定的完整 3 个空格，则会引发错误。

在我的 this.props.album 数据 block 中返回了一个总结果整数，我觉得这对于循环数据以及也许设置我在每个下拉列表中调用的整数可能很有用 -项，以便返回与我实际从 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>

这适用于具有任意数量项目的数组。