Question

因此，我试图做到这一点，因此当您单击搜索按钮时，它会显示所有艺术家的姓名，但是当我单击搜索时，什么也没发生。当我这样做

<Dropdown
    onChangeText={ (val) => this.changeDate(val)}
    label='All Dates'
    data={data}
    style = {{color: 'white'}} //for changed text color
    baseColor="rgba(255, 255, 255, 1)" //for initial text color
/>

它为我提供了搜索查询的所有艺术家姓名的列表，因此我不确定自己缺少什么。我也很新，如果不能很好地解释我，我感到抱歉。

这是我的搜索功能

console.log(artistsArray.name);

这是按钮

  searchAlbums(){
    spotifyWebApi.searchAlbums(this.state.value)
    .then((response) => {
      return response.albums.items.map((t) => {
        return t.artists.map((artistsArray, index) => {
          this.render({
            render(){
              return (
                <div>
                <li key={artistsArray.name}>
                  {artistsArray.name}
                </li>
                </div>
              )
            }
          })
        });
      });
    });
  }

Answer 1

您需要在render()函数中呈现组件列表。
不能为每个相册多次渲染。

这里是渲染专辑艺术家列表的方式。
1.声明保存已回收相册的状态（默认为空数组）。
2.在handleSearchClick上，检索相册并设置相册状态。
3.在render()中，如果找不到相册，则显示相应的消息。
4. else创建艺术家组件列表（包装在<li>中）。
5.通过返回显示组件。

⚠️警告：这不是生产/清洁代码。

class SearchResult extends React.Component {
    state = { albums: [] };

  searchAlbums = async (searchValue) => (await spotifyWebApi.searchAlbums(searchValue));

  handleSearchClick = async (e) => {
    const searchValue = e.target.value;
    const {items: albums} = await this.searchAlbums(searchValue);
    this.setState({albums});
  }

  render() {
    const {albums} = this.state;
    if (!album) return <div>loading...</div>;
    if (album.length === 0) return <div>No albums found</div>;

    // Generate artists components.
    const albumsComponents = albums.map(album => 
        album.artists.map(artists => (<li key={artists.name}>{artists.name}</li>)
    }

    return (
      <div>
        Search Term: 
        <input 
          value={this.state.searchTerm}
          onClick={this.handleSearchClick} />
        {albumsComponents}
      </div>
    );
  }
}

Answer 2

现在，您正在反向进行操作。您必须在render函数内部而不是searchAlbums的侧面上映射相册数组。您可以做的是将专辑数组放置在状态内：

constructor(){
    super();
    this.state = {
        albums: []
    }
}

并在searchAlbums函数中将其设置为该状态：

searchAlbums(){
  spotifyWebApi.searchAlbums(this.state.value)
    .then((response) => {
      this.setState({albums: response.albums.items});
    });
}

然后，在渲染函数中映射它，就像您所做的那样：

render(){
    return this.state.albums.map((t) => {
       return t.artists.map((artistsArray, index) => {
          return (
            <div>
            <li key={artistsArray.name}>
              {artistsArray.name}
            </li>
            </div>
          )
       });
    });
}

如何在ReactJs中呈现jsx元素数组

2 个答案: