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

小编典典

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

all

React 钩子useState用于设置组件状态。但是如何使用钩子来替换回调，如下面的代码：

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

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

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

阅读 93

2022-04-21

共1个答案

小编典典

您需要使用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]);

2022-04-21