在异步回调中使用 useState 挂钩

Question

我正在运行带有回调的异步操作(在这种情况下为 ipfs，但可能无关紧要(，我正在尝试在该回调中使用钩子设置状态。但是代码无法运行...我可能需要在这里使用 useEffect 吗？

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

setIpfsHash 正在阻止内部代码。控制台.log不运行

Answer 1

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

如果要使用async/await，则需要创建一个新承诺。在您的示例中，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)
})
})
}

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

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])