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

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

尝试：

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

        }

Answer 2

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

应该是：

  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。

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

Trying to setState, but function is returning null

javascript

lifecycle

state

reactjs