Javascript 在函数中呈现JSX元素

对不起，如果这个问题用词很奇怪，我不太知道如何描述它。我试图让它这样当你点击专辑名称时，它会显示该专辑的所有曲目；目前，它登录到控制台，但当我尝试渲染它时，要么只显示一个曲目名称，要么什么都没有显示（这就是我目前所在的位置）。这是我的搜索组件，非常感谢您的帮助

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

导出默认类SearchScreen扩展组件{
构造函数（）{
超级（）；
此.state={
值：“”，
答案：错，
反向单击：false，
相册：错误，
搜索相册：{
答复：[]
},
相册：[]，
曲目：['']
};
this.handleChange=this.handleChange.bind（this）；
this.searchAlbums=this.searchAlbums.bind（this）；
}
手变（活动）{
这是我的国家({
值：event.target.value
});
}
//获取相册列表
搜索相册（）{
spotifyWebApi.searchAlbums（this.state.value）
。然后（（响应）=>{
这个.setState（{
相册：response.albums.items，
对,，
});
});
}
render（）{
var-trackinfo=[]；
var=false；
//这是最重要的部分
如果（单击搜索）{
返回此.state.albums.map（（t，计数器）=>{
返回t.artists.map（（artistsArray）=>{
var albumID=t.id；
常量albumInfo=（）=>{
albumInfoClicked=true；
console.log（albumID）
//获取唱片集ID的曲目列表
spotifyWebApi.getAlbumTracks（albumID）
。然后（响应=>{
albumTrackInfo=response.items
返回albumTrackInfo.map（（albumTracks）=>{
这是我的国家({
曲目：albumTracks.name，
albumInfoClicked：真
})
//这是不可能的
返回(
{this.state.tracks}
) 
})
})
}
返回(
{计数器}



作者：{artistsArray.name}


)
});
});
}

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

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

您正在将曲目的状态设置为一个特定的曲目名称。也许您想尝试类似的操作（更新的）

这将为您提供该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
                 })
              })

---

我不熟悉SpotifyAPI，但我想问题可能在于这段逻辑

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

您正在将曲目的状态设置为一个特定的曲目名称。也许您想尝试类似的操作（更新的）

这将为您提供该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
                 })
              })

---

这似乎有很多代码，最好做一个itI的小例子。我编辑掉了不需要的部分，并添加了一些注释。如果（searchClicked）应该是

if（this.state.searchClicked）

if（searchClicked）if（this.state.searchClicked）不应该是

if（this.state.searchClicked）吗

这就是我所认为的问题所在。实际上，你可能会将

这个。setState

放在承诺的

中，然后
中。是的，从风格上说，这将是一个更好的解决方案。我更改了代码，但每当我尝试访问albumInfo函数之外的曲目时，它都是空白的，当我在控制台中记录它时，它就会显示出来过去单击的数据（假设我单击两个相册，第二次单击时显示第一个相册数据）spotifyWebApi.getAlbumTracks（albumID）。然后（response=>{this.setState（{tracks:response.items，albumInfoClicked:true}）}）console.log（this.state.tracks）返回this.state.tracks.map（（albumTracks）=>{return（
{albumTracks.name}
）}）这就是我所认为的问题所在。实际上，你可能会将
这个。设置状态
放在承诺的
中，然后
中。是的，从风格上来说，这将是一个更好的解决方案。我更改了代码，但每当我尝试访问albumInfo函数之外的曲目时，它都是空白的，当我在控制台中记录它时，它会显示data对于过去的单击（假设我单击两个相册，第二次单击时显示第一个相册数据）spotifyWebApi.getAlbumTracks（albumID）。然后（response=>{this.setState（{tracks:response.items，albumInfoClicked:true}）)log（this.state.tracks）返回this.state.tracks.map（（albumTracks）