React.js中useMutation的onSuccess内useState不生效，如何获取data.id？

问题原因 #

你在onSuccess里调用setItem(data.id)后立刻执行了navigate，React的状态更新是异步的，组件在状态更新完成并重新渲染前就被路由跳转卸载了，所以页面根本没机会渲染更新后的item值。

解决方案 #

根据你的实际需求，分两种场景处理：

场景1：想在当前页面短暂显示上传后的ID #

要么去掉navigate（如果不需要跳转），要么把navigate放到setItem的回调函数里，确保状态更新完成后再跳转：

setItem(data.id, () => {
  navigate(`/questions/${data.id}`);
});

更高效的方式是直接用React Query mutation返回的数据渲染，不用额外存到state：

// 直接在render中使用mutation的data
<Text>{uploadQustionMutation.data?.id}</Text>

React Query会自动缓存mutation的返回结果，通过uploadQustionMutation.data就能直接获取，避免额外维护state的麻烦。

场景2：想在跳转后的页面使用这个ID #

你已经通过navigate(/questions/${data.id})把ID作为路由参数传递了，跳转后的页面直接用useParams获取即可：

// 跳转后的问题详情页组件
import { useParams } from "react-router-dom";

function QuestionDetail() {
  const { id } = useParams();
  return <Text>问题ID：{id}</Text>;
}

这是路由间传递数据的标准方式，比跨组件存state更可靠。

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