2

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

2 回答 2

1

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

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

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

const updateBody = (val) => {
    setTitle(val)
    update()
}
于 2020-06-14T18:54:50.240 回答
0

您可以使用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]);

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

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

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

于 2021-08-12T11:34:40.660 回答