如何使用 Async / Await 和 React 钩子?

Question

我正在学习 React 并遵循视频教程。讲师使用类组件，我正在使用功能组件来复习钩子概念。

我想将此代码转换为功能代码：

return(
<div className={classes.editorContainer}>
<ReactQuill 
value={this.state.text} 
onChange={this.updateBody}>
</ReactQuill>
</div>
);
}
updateBody = async (val) => {
await this.setState({ text: val });
this.update();
};

我尝试这样做，但异步似乎没有像我预期的那样工作。等待对setText不起作用。

const [text, setText] = useState('')
const updateBody = async(val) => {
await setText(val)
update()
}

Answer 1

首先，setText 函数不会返回您可以等待并确保数据已设置的承诺。

如果要设置状态并确保在设置值后调用update函数，则需要使用另一个名为useEffect的钩子。 通过使用useEffect您基本上可以在更新时获得最新状态。

如果您不关心状态是否设置，则可以将异步函数转换为以下内容，

const updateBody = (val) => {
setTitle(val)
update()
}

Answer 2

您可以使用useEffect钩子来触发您希望在状态更新后触发的函数。

const [text, setText] = useState('')
useEffect(() => {
update()
}, [text]); // This useEffect hook will only trigger whenever 'text' state changes
const updateBody = (val) => {
setText(val)
}

基本上你useEffect()钩子接受两个参数useEffect(callback, [dependencies]);

回调是包含副作用逻辑的回调函数。useEffect()在 React 将更改提交到屏幕后执行回调函数。 依赖项是可选的依赖项数组。 仅当渲染之间的依赖项发生更改时，useEffect()才会执行回调。

将副作用逻辑放入回调函数中，然后使用 dependencies 参数来控制何时运行副作用

您可以在本文中找到有关useEffect()钩子的更多信息