渲染函數中的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
                 })
              })