反应异步方法 setState 变量未及时设置答案

【问题标题】：React async method setState variable not being set in time反应异步方法 setState 变量未及时设置
【发布时间】：2019-08-19 20:00:20
【问题描述】：

当用户单击按钮时，我尝试依次运行 3 个方法

步骤：

1：将文件推送到 IPFS，取回链接并将其分配给状态变量

2：将该链接（来自该变量）添加到区块链智能合约

3：向 firebase 数据库添加一个条目

问题是，当我尝试将 IPFS 链接传递给我的智能合约时，该链接为空，但是在方法运行后，我可以看到链接打印到控制台。所以我猜它没有及时设置，以便下一个方法查看变量。

IPFS 方法：

pushToIPFS = async(e) => {
      //  e.preventDefault()
        await ipfs.add(this.state.buffer, (err, ipfsHash) => {
            console.log(err, ipfsHash)
            //this.setState({IPFSlink : ipfsHash[0].hash})
            console.log(ipfsHash[0].hash)
            return ipfsHash[0].hash
        })
    }

区块链方式：

addToBlockchain = async(e) => {
        //create a new key for our student
        var key = this.state.StudentNumber + this.state.account[0]
        key = parseInt(hash(key), 10)
        this.setState({idForBlockchain: key})
        console.log(key)

        //get todays date
        let newDate = new Date()
        newDate = newDate.getTime()
        var _ipfsLink = this.state.IPFSlink
        var _account = this.state.account[0]
        console.log(_ipfsLink)
        console.log(this.state.IPFSlink)
        await storehash.methods.sendDocument(_ipfsLink, newDate, 


    }

Firebase 方法：

createStudent = async(e) => {
        //get student details from state variables & current user uid
        var _uid = this.state.uid
        var _studentName = this.state.StudentName
        var _studentNumber = this.state.StudentNumber
        var _courseCode = this.state.CourseCode
        var _courseName = this.state.CourseName
        var _idForBlockchain = this.state.idForBlockchain

        // database.ref.students.uid.studentNumber 
        const db = firebase.database()
        db.ref().child("students").child(_uid).child(_studentNumber).set(
            {   studentName: _studentName,
                courseCode: _courseCode,
                courseName: _courseName,
                blockchainKey: _idForBlockchain 
            }
        );

        alert("Student added")

    }

点击按钮时触发的方法：

AddMyStuff = async (e) => {
        e.preventDefault()
        await this.pushToIPFS()
        await this.addToBlockchain()
        await this.createStudent()
    }

这是返回的错误，所以我假设是 await 和 setState 引起了问题，而我需要的变量没有被设置。

未处理的拒绝（错误）：无效的字符串值（arg="_ipfsLocation", coderType="string", value=null, version=4.0.27）

有谁知道如何解决这个问题？

【问题讨论】：

ipfs.add 正在接受回调，它没有返回承诺。 await 没什么可说的
对不起，我对此有点陌生。那么既然没有承诺，就不需要等待吗？
如果你想在 setState 运行后做某事，只需给它一个回调作为第二个参数。
给哪个方法回调？

标签： reactjs asynchronous solidity ipfs

【解决方案1】：

您可以将 pushToIPFS 转换为 Promise 而不是回调，并在触发回调时解决它。

pushToIPFS = (e) => {
    return new Promise((resolve, reject) => {
          ipfs.add(this.state.buffer, (err, ipfsHash) => {
            resolve(ipfsHash[0].hash);
        })
    });
}

既然它是一个承诺，你可以使用async/await。

AddMyStuff = async (e) => {
        e.preventDefault()
        const ipfsHash = await this.pushToIPFS();
        //you have your ipfsHash defined, you can pass it to your other methods
    }

【讨论】：