时间戳

首页 > 解决方案 > 状态被记录为未定义

reactjs - 状态被记录为未定义

问题描述

我从我的输入中获取文件：other = event.target.files;它以全局变量开头，console.logs 为FileList {0: File, 1: File, 2: File, 3: File, length: 4}. 我将此添加到我的状态（this.state.songList，以 null 开头），并将if(this.state.songList != null)歌曲列表添加this.state.songList到我的 FormData。

.then(()=> {
this.setState({songsList : other})

 }).then(()=> {

   if(this.state.songList != null) {
   Array.from(this.state.songsList).forEach(song => {
    data.append('songs', song);
  })
 }

console.log(other);
console.log(this.state.songList)
})

由于某种原因，if 语句中的代码几乎永远不会运行，因为this.state.songList在控制台中始终未定义。如果我在第二个 .then 中运行代码，那么它会运行并将我的文件添加到 FormData 中，因此我知道this.state.songList第二个中不为空的事实.then。

为什么第二个代码在围绕它.then时没有运行if(this.state.songList != null) ，尽管它没有运行所以我知道它不等于 null，我可以做些什么来解决这个状态被读取为 null 的问题。

标签： reactjs

解决方案

您遇到了这个问题，因为它是一个异步函数，在您执行setState时不一定会更新。then您应该使用回调函数setState来执行您需要对新值执行的任何操作。

this.setState({
  songlist: other
}, () => {
  // code to execute after the songs update in state

  if(this.state.songList != null) {
    Array.from(this.state.songsList).forEach(song => {
      data.append('songs', song);
    })
  }
})

希望这会有所帮助！

推荐阅读