时间戳

首页 > 解决方案 > 如何使用 Async / Await 和 React 钩子？

reactjs - 如何使用 Async / Await 和 React 钩子？

问题描述

我正在学习 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()
}

标签： reactjsreact-hooksreact-functional-componentreact-class-based-component

解决方案

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

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

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

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

推荐阅读