Question

我正在使用回调运行异步操作（在这种情况下为ipfs，但这可能无关紧要），并且我试图在该回调中使用钩子来设置状态。但是代码不起作用...也许我需要在这里使用useEffect吗？

await ipfs.add(buffer, (err, ipfsHash) => {
      setIpfsHash(ipfsHash);
      console.log("in ipfs - ipfshash", ipfsHash);
});

setIpfsHash阻止了内部代码。 console.log无法运行

Answer 1

用ipfs.add处理async/await函数的方式不正确。但是，是的，您希望在这种情况下使用React.useEffect。

如果您想使用async/await，则需要创建一个新的Promise。在您的示例中，ifps.add(buffer, callback)似乎将回调作为参数，所以这行不通。

相反，将其变成一个承诺：

function add(buffer) {
  return new Promise((resolve, reject) => {
    const ipfs = ...

    ipfs.add(buffer, (error, ipfsHash) => {
      if (error) {
        reject(error)
        return
      }
      resolve(ipfsHash)
    })
  })
}

然后，您可以像以下示例一样在async/await中使用React.useEffect：

function App() {
  const [buffer, setBuffer] = React.useState(null)
  const [ipfsHash, setIpfsHash] = React.useState(null)

  React.useEffect(() => {
    async function doWork() {
      try {
        const result = await add(buffer)
        setIpfsHash(result)
      } catch (error) {
        // handle error
      }
    }
    doWork()
  }, [buffer])

  return (
    <div>
      ...
    </div>
  )
}

请确保为您的useEffect钩子指定一个依赖项数组，以使其仅在需要时运行：

React.useEffect(() => {
  // ...
}, [buffer])

在异步回调中使用useState挂钩

1 个答案: