如何在React函数组件中为state变量编写setState回调函数

类组件中的setState支持传入第二个参数作为状态更新完成后的回调，但函数组件的useState返回的状态更新方法没有提供该回调入参。要实现「状态更新完成后执行指定逻辑」的需求，最符合React设计范式的方案是使用useEffect监听目标状态的变化。

基础实现方案（推荐） #

直接基于原生useEffect实现，监听对应状态的变更即可触发回调逻辑，结合你的示例修改后代码如下：

function MyControl(props){
    const [data, setData] = useState(null);

    // setData执行完成、data更新后触发的回调逻辑
    useEffect(() => {
        // 可选：排除初始挂载时data为null的场景，根据业务需求调整判断条件
        if (data === null) return;
        // 此处写入你要在状态更新完成后执行的操作
        console.log('data更新完成，当前值为：', data);
    }, [data]); // 依赖项填写data，仅当data变化时才会触发该effect

    useEffect(()=>{
       // 模拟请求获取学生数据
       const studentInformation = { id: 1, name: "张三" };
       setData(studentInformation);
    },[]); 
    
    return <div> </div>
}

单次回调封装方案（按需使用） #

如果你需要在调用更新函数时才临时绑定单次回调，不想每次状态变更都执行相同逻辑，可以自定义封装带回调的useState hook：

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

// 封装带回调的自定义useState
const useStateWithCallback = (initialState) => {
  const [state, setState] = useState(initialState);
  const callbackRef = useRef(null);

  const setStateWithCallback = (newState, callback) => {
    callbackRef.current = callback;
    setState(newState);
  };

  useEffect(() => {
    if (callbackRef.current) {
      callbackRef.current(state);
      callbackRef.current = null;
    }
  }, [state]);

  return [state, setStateWithCallback];
}

使用方式如下，和普通useState基本一致，仅调用更新函数时可以多传一个回调参数：

function MyControl(props){
    const [data, setData] = useStateWithCallback(null);

    useEffect(()=>{
       const studentInformation = { id: 1, name: "张三" };
       // 第二个参数传入更新完成后的回调
       setData(studentInformation, (newData) => {
         console.log('data更新完成，最新值：', newData);
       });
    },[]); 

    return <div></div>
}

注意事项 #

• 优先使用原生useEffect监听的方案，逻辑更符合React声明式编程的特性，也更便于后续排查问题
• 自定义hook的方案仅适合需要单次绑定回调的特殊场景，不要滥用，避免业务逻辑碎片化

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