如何使用componentDidMount（）在render（）中创建一个异步返回promise链？

Question

我的render函数中的return中有一个按钮，它调用了一个函数，该函数启动了一个promise链，结果更新了一个状态变量。但是，不传递该值。

我在componentDidMount（）上尝试了一些尝试，但没有任何运气

这是我的渲染函数中的按钮

addIPFSItem(){

var searchAddress = "0x9Cf0dc46F259542A966032c01DD30B8D1c310e05";

const contract = require('truffle-contract')
const simpleStorage = contract(SimpleStorageContract)
simpleStorage.setProvider(this.state.web3.currentProvider)


this.state.web3.eth.getAccounts((error, accounts) => {
  simpleStorage.deployed().then((instance) => {
    this.simpleStorageInstance = instance

    return this.simpleStorageInstance.getLength(searchAddress);
  }).then((accountLength) => {

    var items = []
    const ipfsPrefix = "https://ipfs.io/ipfs/";

    var i;
    for (i = 0; i < accountLength; i++) {
      var currHash = this.simpleStorageInstance.getBook(searchAddress, i, 
  {from: searchAddress});

      var currURL = ipfsPrefix + this.currHash;

      //Here I am printing the counter values, and it prints the correct 
      //amount
      console.log('itemhash ', i)
      items.push(currHash)
    }
    //I do not get the value of items[1] in the console, but an undefined
    //promise
    console.log('address URL ', items[1])

    //the state of ipfsHash is not updated correctly
    return this.setState({ipfsHash: items[1]});
  })
 })
}

console.log('address URL',items[1])应给出类似address URL 0x9CF0DC46F259542A966032C01DD30B8D1C310E05的内容。但是，我得到的却是地址URLpromise{ } 。

Answer 1

您的this.SimpleStorageInstance.getBook是一个promise，这意味着它是异步执行的。

要获得结果，您必须使用.then或新语法async/await。使用以下函数，您的items数组将填充正确的数据：

如果选择此解决方案，则必须将async关键字放在父函数名称之前

for (i = 0; i < accountLength; i++) {
    items.push(await this.simpleStorageInstance.getBook(searchAddress, i, { from: searchAddress }))
}

const items = myAccounts.map(async () => await this.simpleStorageInstance.getBook(searchAddress, i, { from: searchAddress }))