React中useCallback依赖变更后未更新函数问题如何解决？

你对useCallback的理解是正确的：当依赖项变化时，useCallback确实会返回更新后的新函数。你遇到的问题和useCallback本身无关，是由React状态更新的异步批量执行特性导致的。

React的setState类更新操作不会立刻修改当前作用域内的状态变量，也不会立刻触发组件重渲染，而是会等当前同步代码全部执行完毕后，再批量执行状态更新、触发组件重渲染。

你在onSubmit中的执行顺序实际是：

1. 调用setInstance，把状态更新请求提交到React的更新队列，当前作用域内的instance还是提交前的旧值
2. 调用当前渲染闭包中捕获的validate函数，这个validate绑定的是旧的instance值，自然读取不到转换后的新值
3. onSubmit执行完毕，React才触发重渲染，生成绑定了最新instance的新validate函数，但此时校验已经执行完毕了，所以不符合预期。

最简洁且符合逻辑的修复方式是调整执行顺序，先计算转换后的值、执行校验，再更新状态，避免依赖异步状态更新传递数据：

1. 修改validate函数，改为接收参数传入校验目标，消除闭包依赖 #

const validate = useCallback((targetInstance) => {
  Object.entries(targetInstance).forEach(([k, v]) => {
    if (v === "") {
      console.log("error while validating", k, "value cannot be empty");
    }
  });
}, []);

2. 调整onSubmit的执行逻辑 #

const onSubmit = useCallback(
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    // 先计算转换后的实例值
    const transformedInstance = fields.reduce(
      (acc, { name, onSubmitTransformer }) => ({
        ...acc,
        [name]: onSubmitTransformer(acc[name])
      }),
      instance
    );
    // 直接传入转换后的值做校验
    validate(transformedInstance);
    // 最后更新状态
    setInstance(transformedInstance);
  },
  [instance, validate]
);

如果你的业务场景确实需要在状态更新完成后再执行校验，可以新增一个标记状态配合useEffect实现：

const [needValidate, setNeedValidate] = useState(false);

// 状态更新后自动触发校验
useEffect(() => {
  if (needValidate) {
    validate();
    setNeedValidate(false);
  }
}, [needValidate, validate]);

const onSubmit = useCallback(
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    setInstance((instance) =>
      fields.reduce(
        (acc, { name, onSubmitTransformer }) => ({
          ...acc,
          [name]: onSubmitTransformer(acc[name])
        }),
        instance
      )
    );
    // 标记需要在状态更新后执行校验
    setNeedValidate(true);
  },
  []
);

内容的提问来源于stack exchange，提问作者Zeno Dalla Valle