如何在React的useState钩子中实现setState回调功能

类组件里setState的第二个回调参数会在状态更新完成后执行，函数组件中没有这个参数，我们可以通过useEffect钩子来实现相同逻辑，具体有两种方式：

方式一：监听目标状态变化（通用场景） #

如果每次selectedOption更新后都需要执行checkVatEnabled，可以直接监听该状态的变化：

import { useState, useEffect } from 'react';

const YourComponent = () => {
  // 初始化状态对象，对应类组件中的state
  const [vatState, setVatState] = useState({
    selectedOption: '',
    isUpdateVatTax: false,
    vatTaxRate: '',
    vatTaxName: '',
    vatTaxId: ''
  });

  // 当selectedOption更新时，执行原回调逻辑
  useEffect(() => {
    checkVatEnabled(vatState.selectedOption);
  }, [vatState.selectedOption]); // 依赖项：仅当selectedOption变化时触发

  // 对应类组件中更新状态的逻辑
  const handleUpdateVat = (resp) => {
    setVatState({
      selectedOption: resp?.vatTaxName,
      isUpdateVatTax: !!resp?.vatTaxName,
      vatTaxRate: resp?.vatTaxRate,
      vatTaxName: resp?.vatTaxName,
      vatTaxId: resp?.vatTaxId,
    });
  };

  // 原checkVatEnabled函数，迁移到组件内部
  const checkVatEnabled = (selectedOption) => {
    // 这里写你的业务逻辑
    console.log('执行checkVatEnabled，选中项：', selectedOption);
  };

  return (
    // 组件JSX内容
  );
};

export default YourComponent;

方式二：仅在特定更新后执行（精准场景） #

如果只需要在这次特定的状态更新后执行回调，而不是每次selectedOption变化都执行，可以添加一个触发标志来控制：

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [vatState, setVatState] = useState({
    selectedOption: '',
    isUpdateVatTax: false,
    vatTaxRate: '',
    vatTaxName: '',
    vatTaxId: ''
  });
  // 新增触发标志，控制回调执行时机
  const [shouldCheckVat, setShouldCheckVat] = useState(false);

  useEffect(() => {
    if (shouldCheckVat) {
      checkVatEnabled(vatState.selectedOption);
      setShouldCheckVat(false); // 执行后重置标志，避免重复触发
    }
  }, [shouldCheckVat, vatState.selectedOption]);

  const handleUpdateVat = (resp) => {
    setVatState({
      selectedOption: resp?.vatTaxName,
      isUpdateVatTax: !!resp?.vatTaxName,
      vatTaxRate: resp?.vatTaxRate,
      vatTaxName: resp?.vatTaxName,
      vatTaxId: resp?.vatTaxId,
    });
    // 触发回调执行
    setShouldCheckVat(true);
  };

  const checkVatEnabled = (selectedOption) => {
    // 业务逻辑
    console.log('执行checkVatEnabled，选中项：', selectedOption);
  };

  return (
    // 组件JSX内容
  );
};

export default YourComponent;

关键说明 #

• 函数组件中useState的更新是异步的，不能直接在setVatState后立即调用checkVatEnabled，此时新状态还未生效。
• useEffect的依赖数组必须包含所有在回调中用到的状态，否则会出现闭包陷阱，导致读取到旧状态。

内容的提问来源于stack exchange，提问作者Anurag Sharma