如何在for循环内的promise中设置状态[重复]答案

【问题标题】：how to set a state within a promise inside a for loop [duplicate]如何在for循环内的promise中设置状态[重复]
【发布时间】：2019-02-06 00:14:04
【问题描述】：

我有一个状态this.state = { PathBased : [] , ...ect} 和一个包含 for 循环的函数，在循环 this.state.data 之后，我想将 for 循环的每个返回元素添加到 PathBased 状态，我找不到怎么做，请你帮忙顺便说一句

console.log(this.state.data) 输出为 5

async readFromLocal (){
        let dirs = RNFetchBlob.fs.dirs;
        let path = [];
         let leng = this.state.data.length;
          if(leng > 0)
          {
         for( var j = 0 ; j < leng; j++)
         {
          path[j] = dirs.PictureDir+"/folder/"+this.state.data[j].title;

            const xhr = RNFetchBlob.fs.readFile(path[j], 'base64')
            .then ((data) => {this.setState({PathBased:[...PathBased,data]})})
            .catch ((e) => {e.message});
       }

      }
    console.log(this.state.PathBased.length) // output = 0
    }

【问题讨论】：

在尝试记录状态之前，您不会等待您的承诺解决。

标签： javascript reactjs react-native

【解决方案1】：

您可以使用Promise.all 并将最终结果设置为PathBased 状态。此外，由于 setState 是异步的，您需要在 setState 回调中检查更新的状态。

async readFromLocal (){
    let dirs = RNFetchBlob.fs.dirs;
    let path = [];
    let promises = [];
    let leng = this.state.data.length;
    if(leng > 0) {
       for( let j = 0 ; j < leng; j++) {
          path[j] = dirs.PictureDir+"/folder/"+this.state.data[j].title;
          promises.push(RNFetchBlob.fs.readFile(path[j], 'base64'))
       }
    }
    Promise.all(promises)
        .then(data => this.setState({PathBased: data}, () => {console.log(this.state.PathBased)})
        )
        .catch(e => {console.log(e.message)});   
}

【讨论】：