reactjs - 如何在react hooks上使用 `setState`回调

Question

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

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

我想在状态更新后做一些事情。

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

Answer 1

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

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]);