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函数不会返回一个可以等待并确保数据已设置的承诺。

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

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

useEffect

如何通过React钩子使用Async / Await？

1 个答案: