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

【问题标题】：How can I render an array of jsx elements in ReactJs如何在 ReactJs 中呈现 jsx 元素数组
【发布时间】：2018-07-19 02:00:55
【问题描述】：

所以我试图做到这一点，当您单击搜索按钮时，它会显示所有艺术家的姓名，但当我单击搜索时没有任何反应。当我这样做时

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>
              )
            }
          })
        });
      });
    });
  }

这是按钮

<button class="btn btn-small" type="button" onClick={() => this.searchAlbums()}>Search</button>

【问题讨论】：

这里有一些问题。一个好的起点就是让你的调用结果只是更新状态或道具。渲染功能属于组件，而不是您的响应。看看这个：blog.hellojs.org/fetching-api-data-with-react-js-460fe8bbf8f2
为什么没有发布你所有的代码？我的意思是你的整个文件前：index.js

标签： javascript arrays json reactjs

【解决方案1】：

你需要在render()函数中渲染一个组件列表。
不会为每个相册多次渲染。

以下是呈现专辑艺术家列表的方法。
1. 声明状态以保存已检索的相册（默认为空数组）。
2.在handleSearchClick上，检索相册并设置相册状态。
3.在render()中，如果找不到相册，则显示相应的消息。
4. 否则创建艺术家组件列表（包装在<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>
    );
  }
}

【讨论】：

【解决方案2】：

现在你正在做相反的事情。您必须在渲染函数内映射专辑数组，而不是在 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>
          )
       });
    });
}

【讨论】：