如何在RTK Query的mutation unwrap后正确处理过时的回调函数？

你这个问题我太熟了——这本质上就是React里经典的过时闭包问题，刚好在RTK Query的mutation场景下暴露出来了。你观察得完全没错：当你调用mutation的时候，then里捕获的aCallback是当时的版本，如果之后父组件更新了这个回调，mutation完成时触发的还是旧的那个，确实很闹心。

我给你几个实用的解决办法，都是日常开发中常用的，不用搞复杂的重构：

方案一：用useRef追踪最新的回调（最简洁） #

你提到了useRef，但其实不用把所有状态都存进ref里，只需要存回调本身就行！因为父组件传过来的aCallback已经绑定了它需要的所有状态，我们只要保证mutation完成时调用的是最新版本的回调函数就够了。

代码示例：

const XComponent = ({ aCallback }) => {
  const [mutation] = useRtkQueryMutationHook()
  // 用ref存最新的回调引用
  const latestCallbackRef = useRef(aCallback)

  // 每次aCallback更新时，自动同步到ref
  useEffect(() => {
    latestCallbackRef.current = aCallback
  }, [aCallback])

  const doSomeAction = useCallback(() => {
    mutation()
      .unwrap()
      .then(() => {
        // 这里永远拿最新的回调
        if (latestCallbackRef.current) {
          latestCallbackRef.current()
        }
      })
  }, [mutation])

  return <Button onClick={() => doSomeAction()} />
}

这个思路的核心就是：放弃依赖闭包捕获的旧回调，转而从ref里拿实时的最新引用。useEffect会帮我们在aCallback每次变化时自动更新ref，不管mutation跑多久，最后触发的都是最新的回调，完美解决问题。

方案二：利用RTK Query的onSuccess配置 #

RTK Query的useMutation本身就支持onSuccess选项，只要我们把aCallback加入hook的依赖数组，就能确保onSuccess始终是最新的版本：

const XComponent = ({ aCallback }) => {
  // 把aCallback加入依赖，确保onSuccess始终用最新的回调
  const [mutation] = useRtkQueryMutationHook(
    {},
    {
      onSuccess: () => {
        aCallback()
      }
    }
  )

  const doSomeAction = useCallback(() => {
    mutation().unwrap()
  }, [mutation])

  return <Button onClick={() => doSomeAction()} />
}

这里要注意，当aCallback更新时，useMutation会因为依赖变化重新初始化，此时的onSuccess就会绑定最新的回调，mutation成功时自然会触发正确的逻辑。

方案三：处理子组件内部状态的场景 #

如果你的回调不仅要用到父组件传的props，还要用到子组件自己的local state，那可以把需要的状态和回调一起包装成一个函数，存到ref里，不用单独存每个状态：

const XComponent = ({ aCallback }) => {
  const [mutation] = useRtkQueryMutationHook()
  const [localCount, setLocalCount] = useState(0)
  // 存一个包含最新状态和回调的函数
  const latestActionRef = useRef(() => {
    aCallback(localCount)
  })

  // 每次依赖变化时更新这个函数
  useEffect(() => {
    latestActionRef.current = () => {
      aCallback(localCount)
    }
  }, [aCallback, localCount])

  const doSomeAction = useCallback(() => {
    mutation()
      .unwrap()
      .then(() => {
        latestActionRef.current()
      })
  }, [mutation])

  return (
    <>
      <Button onClick={() => doSomeAction()} />
      <button onClick={() => setLocalCount(prev => prev + 1)}>
        点击更新本地计数
      </button>
    </>
  )
}

这样不管是父组件的aCallback还是子组件的localCount更新，ref里的函数都会同步成最新的，mutation完成时触发的就是包含所有最新数据的逻辑，完全避开了闭包陷阱。

总结一下 #

• 优先用方案一，适合大多数只依赖父组件props的场景，代码简洁，逻辑清晰。
• 如果涉及子组件内部状态，用方案三，把需要的逻辑包装成函数存进ref，比单独存每个状态要省心。
• 方案二适合习惯用RTK Query内置生命周期的同学，注意要正确处理依赖数组，确保onSuccess能拿到最新的回调。

内容来源于stack exchange