RTK Query中仅在mutation成功时关闭编辑表单的正确方案

我有一个帖子编辑表单，希望仅在mutation执行成功时关闭它。现有如下组件代码：

function PostForm({ post, setIsEditing }) {
  const [editPost, { isLoading, isError, isSuccess }] = useEditPostMutation();

  return (
    <form onSubmit={() => handleSubmit(data)}>
      ...
    </form>
  );
}

请问正确的实现方式是什么？是使用依赖isSuccess的useEffect钩子：

useEffect(() => {
  if (isSuccess) setIsEditing(false);
}, [isSuccess]);

还是在handleSubmit中等待响应并判断成功：

const handleSubmit = (data) => {
  editPost(data)
  .then(res => if (isSuccess) setIsEditing(false));
}

是否存在其他更推荐的实现方式？

两种现有方式的分析 #

1. handleSubmit中用then判断isSuccess的方式不可取

   • 语法错误：then回调内的if语句缺少花括号，正确写法应为then(res => { if (isSuccess) setIsEditing(false); })。
   • 状态不同步问题：isSuccess是组件状态变量，mutation完成后状态更新存在延迟，then回调中可能拿到旧的isSuccess值，导致逻辑失效。

2. useEffect监听isSuccess的方式可行但不够优雅

   • 能实现需求：当isSuccess变为true时触发关闭表单。
   • 潜在问题：若后续重复提交或其他操作导致isSuccess再次变为true，会重复触发关闭逻辑（不过RTK Query的mutation通常会在下次调用时重置isSuccess，大部分场景下无影响）。

更推荐的实现方式 #

方式一：用async/await直接处理Promise

editPost(data)返回的Promise会在mutation成功时resolve，失败时reject，因此可直接在await后执行关闭逻辑：

const handleSubmit = async (data) => {
  try {
    await editPost(data);
    // 仅mutation成功时执行此处逻辑
    setIsEditing(false);
  } catch (error) {
    // 可选：处理错误，比如提示用户编辑失败
    console.error('编辑帖子失败:', error);
  }
};

这种方式逻辑直接，无需依赖组件状态，避免了状态同步问题。

方式二：调用mutation时传入onSuccess回调

RTK Query的useMutation支持在调用时传入onSuccess回调，专门处理成功后的逻辑：

const handleSubmit = (data) => {
  editPost(data, {
    onSuccess: () => {
      setIsEditing(false);
    },
    // 可选：同时处理错误
    onError: (error) => {
      console.error('编辑帖子失败:', error);
    }
  });
};

这种方式将成功逻辑与单次mutation调用绑定，语义清晰，不会受其他状态变化影响。

总结 #

优先选择上述两种推荐方式，它们比依赖isSuccess的useEffect更直接可靠，也避免了then回调中状态不同步的问题。

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