useMutation完成后如何更新本地React状态？为何需二次点击生效

你的代码出现“第二次点击才生效”的核心原因是React组件的闭包快照机制，和useMutation本身的能力无关：

• 你在组件顶层通过updateUser()拿到的success、data状态，是当前组件渲染周期里的固定值——每次组件渲染时这些变量都会重新生成一次，函数内部引用的永远是创建该函数时所处渲染周期的快照值，不会自动跟随外部状态更新变化。
• 第一次点击按钮时，onAddUser函数是基于点击前的最后一次渲染创建的，此时捕获的success还是初始值false。哪怕你执行await update(newUser)等到接口返回成功，代码里用来判断的还是函数创建时存下的旧success值，根本拿不到接口返回后更新的新状态。
• 等接口请求成功后，因为mutation状态变化触发组件重新渲染，这时候新的渲染周期里success才会变成true，但第一次点击触发的执行流程早已经走完判断逻辑，错过了更新时机。直到第二次点击按钮时，新的onAddUser函数是基于上一次（也就是第一次mutation成功后的那次）渲染创建的，此时捕获的success已经是true，自然就触发了数组更新。
• 额外的问题：你现在的写法相当于每次组件渲染都重新创建一个新的mutation实例，完全违背了react-query的设计初衷，把它本来提供的状态同步能力都丢了。

以下方案均不需要依赖useQuery缓存拉取全量用户列表，可直接更新本地state，同时彻底避开闭包快照问题：

路径1：用mutation自带的成功回调更新本地状态 #

不要在外部读取闭包里的success/data值做判断，直接把状态更新逻辑放到mutation的成功回调里，这个回调会在接口真正返回成功结果时触发，能直接拿到最新的接口返回数据，完全避开闭包问题。
示例代码：

import { useMutation } from '@tanstack/react-query'
import { useState } from 'react'

export default function App() {
  const [users, setUsers] = useState(allUsers)
  // 正确声明mutation实例，绑定接口请求逻辑和成功回调
  const addUserMutation = useMutation({
    mutationFn: (newUserInfo) => submitNewUserApi(newUserInfo), // 替换成你实际的新增用户接口方法
    onSuccess: (createdUser) => {
      // 直接拿到接口返回的最新新增用户数据，更新本地state
      setUsers(prevUsers => [...prevUsers, createdUser])
    }
  })

  const onAddUser = () => {
    addUserMutation.mutate(newUser)
  }

  return (
    <>
      <div>
        {users.map((user) => (
          <div key={user.id}>
            {user.name} - {user.job}
          </div>
        ))}
      </div>
      {addUserMutation.isPending && <div>sending...</div>}
      {addUserMutation.isError && <div>error</div>}
      <button 
        onClick={onAddUser} 
        disabled={addUserMutation.isPending}
      >
        add user
      </button>
    </>
  )
}

路径2：依赖Promise返回值更新本地状态 #

如果你想保留现有update方法返回Promise的写法，不需要改造原有服务封装逻辑，可以直接读取Promise resolve的返回值做状态更新，完全不需要依赖外部的success状态判断：

const onAddUser = async () => {
  try {
    // 直接等待Promise返回的成功结果，不读取闭包中的旧状态
    const createdUser = await update(newUser)
    setUsers(prevUsers => [...prevUsers, createdUser])
  } catch (err) {
    // 统一处理请求失败的场景
    console.error('用户新增失败', err)
  }
}

注意：不要把await等待的异步结果和外部闭包里的状态变量绑定做判断——这两者是独立的两套状态，await执行完成的那一刻，当前执行栈里引用的外部变量还是函数创建时的快照值，不会自动同步最新状态。

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