Question

我正在将React与Spotify的Web API结合使用，并尝试设置状态。我也在使用React的生命周期方法，但是它一直返回null。

componentDidMount() {
  this.fetchNewReleases()
}

fetchNewReleases() {
  const options = {
    "items": {
       "album_type": "single"
     }
  }

  const items = spotifyWebApi.getNewReleases(options, function (err, data) {
    if (err) {
     console.log(err)
    }
    else {
      data.albums.items.filter(item => {
        return item.album_type = "single"
      })
    }
  })

  this.setState({
    items:items
  }) 
}

有人可以解释为什么吗？

Answer 1

这是this problem的特例。 items在调用setState时不存在。异步getNewReleases调用不会返回结果，因为它尚不存在。

应该是：

  spotifyWebApi.getNewReleases(options, (err, data) => {
    if (err) {
     console.log(err)
    }
    else {
      this.setState({
        items: data.albums.items.filter(item => {
         return item.album_type === "single"
        })
      });
    }
  });

请注意，getNewReleases回调应为箭头功能，以获取正确的this。

Answer 2

尝试：

componentDidMount() {
  this.fetchNewReleases()
}

 fetchNewReleases = () => {
          const options = {
            "items": {
              "album_type": "single"
            }
          }
          spotifyWebApi.getNewReleases(options, function (err, data) {
            if (err) {
              console.log(err)
            }
            else {
              let items = data.albums.items.filter(item => {
                return item.album_type = "single"
              })
              this.setState({
                items:items
              })
            }
          })

        }

尝试设置状态，但函数返回null

2 个答案: