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

Posted 2023-02-22

技术标签:

【中文标题】如何使用 Async / Await 和 React 钩子？【英文标题】：How to use Async / Await with React hooks? 【发布时间】：2020-10-04 04:32:00 【问题描述】：

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

我尝试过这样做，但异步似乎没有按我预期的那样工作。 Await 不适用于 setText。

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

【问题讨论】：

setText 是 setTitle? 你不需要使用await @SomoKRoceS 是的，这是一个错误。我编辑了它 @japrescott 我希望我的更新功能在用户停止输入后 1.5 秒后运行。该怎么做？ this question 有用吗？ 【参考方案1】：

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

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

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

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

【讨论】：

useEffect(() => update(), [text]) 我这样做了，但结果相同。我希望我的更新功能在用户停止输入后 1.5 秒后运行。该怎么做？【参考方案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]);

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