渲染函数中的JSX元素

Question

Sorry if the question is worded oddly didn't quite know how to describe it. I am trying to make have it so when you click on the albums name it displays all the tracks for that album; at the moment it logs to the console fine but when I try to render it, either only one of the tracks names shows up or nothing at all (which is where I am currently at). Here is my search component, any and all help is appreciated.

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

I am not familiar with spotify api, but I suppose that problem may be with this piece of logic

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

You're setting the state of the tracks to one specific track name. Maybe you would like to try something like this ( updated )

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

This should give you an array of all songs' names from that api, and update the state of tracks.

UPDATE

Damian G. I suppose you may prefer to get the data this way - this will give you an array of songs' names as strings.

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

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

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

Or stylistically a better solution:

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

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

                 return songsArray;

              }).then(songsArray => {

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