React Hooks中setState执行后调用指定回调的最佳实践

针对你遇到的「没法区分useEffect触发原因」的问题，社区常用的几个靠谱方案如下：

1. 新增操作类型标记状态 #

最直观的方案是加一个专门记录操作类型的state，比如actionType，每次执行保存或丢弃时，同时更新这个标记，再通过useEffect监听标记来触发对应回调：

import { useState, useEffect } from 'react';

// 假设初始表单数据
const initialFormData = { name: '', email: '' };

function Form() {
  const [formData, setFormData] = useState(initialFormData);
  // 标记当前操作类型，执行完回调后重置
  const [actionType, setActionType] = useState<'save' | 'discard' | null>(null);

  const handleSave = () => {
    // 模拟获取最新表单数据
    const updatedData = { ...formData, name: '新名称' };
    setFormData(updatedData);
    setActionType('save');
  };

  const handleDiscard = () => {
    setFormData(initialFormData);
    setActionType('discard');
  };

  // 监听操作类型，触发对应回调
  useEffect(() => {
    if (!actionType) return;

    // 这里拿到的是更新后的formData
    if (actionType === 'save') {
      console.log('保存完成，数据：', formData);
      // 调用你的onSaved逻辑
      // onSaved(formData);
    } else if (actionType === 'discard') {
      console.log('丢弃完成，数据：', formData);
      // 调用你的onDiscarded逻辑
      // onDiscarded(formData);
    }

    // 重置标记，避免重复触发
    setActionType(null);
  }, [actionType, formData]);

  return (
    <div>
      <input value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} />
      <button onClick={handleSave}>保存</button>
      <button onClick={handleDiscard}>丢弃</button>
    </div>
  );
}

这个方案逻辑清晰，维护成本低，适合大多数中等复杂度的表单场景。

2. 封装带回调的自定义useState #

如果你怀念类组件里setState的回调写法，可以自己封装一个支持回调的自定义hook，直接在更新state时传入对应操作的回调：

import { useState, useCallback } from 'react';

// 自定义hook：支持回调的useState
function useStateWithCallback<T>(initialState: T) {
  const [state, setState] = useState(initialState);
  
  const setStateWithCallback = useCallback(
    (newState: T | ((prev: T) => T), callback?: (updatedState: T) => void) => {
      setState(prev => {
        const updated = typeof newState === 'function' ? (newState as (prev: T) => T)(prev) : newState;
        // 用setTimeout确保回调在state更新后执行（React批量更新特性）
        if (callback) setTimeout(() => callback(updated), 0);
        return updated;
      });
    },
    []
  );

  return [state, setStateWithCallback] as const;
}

// 使用示例
function Form() {
  const [formData, setFormData] = useStateWithCallback(initialFormData);

  const handleSave = () => {
    setFormData(
      prev => ({ ...prev, name: '新名称' }),
      (updatedData) => {
        console.log('保存完成，数据：', updatedData);
        // onSaved(updatedData);
      }
    );
  };

  const handleDiscard = () => {
    setFormData(
      initialFormData,
      (updatedData) => {
        console.log('丢弃完成，数据：', updatedData);
        // onDiscarded(updatedData);
      }
    );
  };

  return (/* 表单内容 */);
}

注意：如果你的回调依赖DOM更新后的状态（比如获取元素尺寸），可以把setTimeout换成requestAnimationFrame，或者结合useEffect监听state变化来调整。

3. 用useReducer管理复杂状态 #

如果表单逻辑复杂（比如还有校验、多字段联动等），用useReducer把状态更新和操作类型绑定起来，回调可以直接在dispatch后调用——因为你已经提前计算好了更新后的state：

import { useReducer } from 'react';

// 定义action类型
type FormAction = 
  | { type: 'UPDATE_FORM', payload: Partial<typeof initialFormData> }
  | { type: 'RESET_FORM' };

// reducer函数
function formReducer(state: typeof initialFormData, action: FormAction) {
  switch (action.type) {
    case 'UPDATE_FORM':
      return { ...state, ...action.payload };
    case 'RESET_FORM':
      return initialFormData;
    default:
      return state;
  }
}

function Form() {
  const [formData, dispatch] = useReducer(formReducer, initialFormData);

  const handleSave = () => {
    const updatedData = { ...formData, name: '新名称' };
    dispatch({ type: 'UPDATE_FORM', payload: updatedData });
    // 直接调用保存回调，用提前计算好的updatedData
    console.log('保存完成，数据：', updatedData);
    // onSaved(updatedData);
  };

  const handleDiscard = () => {
    dispatch({ type: 'RESET_FORM' });
    // 直接调用丢弃回调，用初始数据
    console.log('丢弃完成，数据：', initialFormData);
    // onDiscarded(initialFormData);
  };

  return (/* 表单内容 */);
}

这个方案适合复杂场景，把状态更新逻辑集中管理，避免分散的setState调用，回调逻辑也更清晰。

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