Question

我正在开发一个Rails应用程序，该应用程序通过对Spotify API的AJAX调用来绘制数据，并通过我使用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数据块中返回了一个总结果整数，我感觉好像在循环数据方面有用，也许设置我调用每个数据的整数dropdown-item，以便返回与我实际从Ajax调用中获得的结果一样多的数据。

无论如何，任何帮助将不胜感激。使用JavaScript并不像Ruby那么尖锐，虽然我觉得我在正确的轨道上我绝对可以用手。

Answer 1

而不是返回＆lt; ul＆gt; ，它总是假设它有3个孩子，为什么不把 this.props.albums.albums.items 中的每个对象转换成直接＆lt; li＆gt; （不要使用＆lt; div＆gt; ，这里的HTML不合适）？：

＆＃xA;＆＃xA; <预> <代码>＆LT; UL＆GT;＆＃XA; {this.props.albums.albums.items.map（功能（专辑）{＆＃xA;返回（＆＃xA;＆lt; li className =“dropdown-item”＆gt;＆＃xA; {album.name}＆ #xA;＆lt; / li＆gt;＆＃xA;）;＆＃xA;}）}＆＃xA; ＆lt; li＆gt;或者自己添加＆lt; / li＆gt;＆＃xA;＆lt; / ul＆gt;＆＃xA; ＆＃xA;＆＃xA;

这适用于数组任意数量的物品。

＆＃xA;

在ReactJS中调试实时搜索栏

1 个答案: