如何在反应钩子上使用\`setState\`回调

新手上路,请多包涵

React hooks 引入了 useState 用于设置组件状态。但是如何使用钩子来替换回调,如下面的代码:

 setState(
  { name: "Michael" },
  () => console.log(this.state)
);

我想在状态更新后做点什么。

我知道我可以使用 useEffect 来做额外的事情,但我必须检查需要位代码的状态先前值。我正在寻找一个可以与 useState 挂钩使用的简单解决方案。

原文由 Joey Yi Zhao 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.2k
2 个回答

您需要使用 useEffect 挂钩来实现此目的。

 const [counter, setCounter] = useState(0);

const doSomething = () => {
  setCounter(123);
}

useEffect(() => {
   console.log('Do something after counter has changed', counter);
}, [counter]);


如果您希望 在第一次初始渲染期间忽略 useEffect 回调,则相应地修改代码:

 import React, { useEffect, useRef } from 'react';

const [counter, setCounter] = useState(0);
const didMount = useRef(false);

const doSomething = () => {
  setCounter(123);
}

useEffect(() => {
  // Return early, if this is the first render:
  if ( !didMount.current ) {
    return didMount.current = true;
  }
  // Paste code to be executed on subsequent renders:
  console.log('Do something after counter has changed', counter);
}, [counter]);

原文由 Zohaib Ijaz 发布,翻译遵循 CC BY-SA 4.0 许可协议

如果你想更新以前的状态,那么你可以在钩子中这样做:

 const [count, setCount] = useState(0);

setCount(previousCount => previousCount + 1);

原文由 Bimal Grg 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
logo
Stack Overflow 翻译
子站问答
访问
宣传栏