javascript - 在函数中渲染 JSX 元素

Question

抱歉，如果问题措辞奇怪，我不知道如何描述它。我试图做到这一点，所以当您单击专辑名称时，它会显示该专辑的所有轨道；目前它可以正常登录到控制台，但是当我尝试渲染它时，要么只显示其中一个轨道名称，要么什么都没有(这是我目前所在的位置)。这是我的搜索组件，感谢您的帮助。

export default class SearchScreen extends Component {
  constructor() {
    super();
    this.state = {
      value: '',
      searchClicked: false,
      backClicked: false,
      albumInfoClicked: false,
      searchAlbums: {
        response: []
      },
      albums: [],
      tracks: ['']

    };
    this.handleChange = this.handleChange.bind(this);
    this.searchAlbums = this.searchAlbums.bind(this);
  }

  handleChange(event) {
      this.setState({
        value: event.target.value
      });
    }
  //Gets list of albums
  searchAlbums() {
    spotifyWebApi.searchAlbums(this.state.value)
      .then((response) => {
        this.setState({ 
          albums: response.albums.items ,
          searchClicked: true,
        });
      });
  }

  render() {

    var albumTrackInfo = [];
    var albumInfoClicked = false;
    //this is the part that matters
    if(searchClicked) {
      return this.state.albums.map((t, counter) => {
       return t.artists.map((artistsArray) => {
         var albumID = t.id;

          const albumInfo = () => {
           albumInfoClicked = true;
           console.log(albumID)
             //Gets list of tracks for the album ID
             spotifyWebApi.getAlbumTracks(albumID)
               .then(response => {
                 albumTrackInfo = response.items

                 return albumTrackInfo.map((albumTracks) => {
                  this.setState({
                    tracks: albumTracks.name,
                    albumInfoClicked: true
                  })
                    //this isnt getting renderd
                    return (
                        <div>
                          <li>{this.state.tracks}</li>
                        </div>
                    ) 
                 })
              })

            }

          return (
            <div class="result-container row">
              <div class="row">
                <img src={t.images[0].url} alt={t.name} class="image" height="256px" width="256px" data-toggle="tooltip" data-placement="top" title="Hooray!" /> {counter}
                <div class="middle">
                  <div key={t.name} class="text">
                    <a href="#" onClick={() => albumInfo()}> {t.id} <br></br> {t.name}  </a><br></br>
                    By: {artistsArray.name} <br></br>
                    <i class="fas fa-play"></i>
                  </div>

                  </div>
              </div>
            </div>
          )
       });
    });
  }

Answer 1

我不熟悉 spotify api，但我想问题可能出在这段逻辑上

spotifyWebApi.getAlbumTracks(albumID)
               .then(response => {
                 albumTrackInfo = response.items
                 return albumTrackInfo.map((albumTracks) => {
                  this.setState({
                    tracks: albumTracks.name,
                    albumInfoClicked: true
                  })

您正在将轨道状态设置为一个特定的轨道名称。也许您想尝试这样的事情(已更新)

spotifyWebApi.getAlbumTracks(albumID)
       .then(response => {
         albumTrackInfo = response.items

         let songsObject = albumTrackInfo.reduce((acc, val) => {
            const name = val.name;

            return {
                ...acc, 
                [name]: name
            };
        }, {});

        let songsArray = Object.keys(songsObject);

         this.setState({
            tracks: songsArray
         })
      })

这应该会为您提供来自该 API 的所有歌曲名称的数组，并更新轨道的状态。

更新

Damian G. 我想您可能更喜欢以这种方式获取数据 - 这将为您提供一组歌曲名称作为字符串。

spotifyWebApi.getAlbumTracks(albumID)
           .then(response => {
             albumTrackInfo = response.items

             let newArray = albumTrackInfo.map((albumTrack) => {return albumTrack.name});

             this.setState({
                tracks: newArray
             })
          })

或者在风格上更好的解决方案:

spotifyWebApi.getAlbumTracks(albumID)
               .then(response => {
                 albumTrackInfo = response.items

                 let songsArray = albumTrackInfo.map((albumTrack) => {return albumTrack.name});

                 return songsArray;

              }).then(songsArray => {

                    this.setState({
                    tracks: songsArray
                 })
              })