Redux Toolkit useMutation返回isUninitialized:true问题咨询

出现isUninitialized: true的核心原因是mutation请求从未被触发，以下是常见的几个场景：

• 未调用mutate函数
  useMutation返回的mutate（或mutateAsync）是触发请求的唯一入口。如果点击提交按钮时没调用这个函数，mutation会一直处于初始状态。
  错误示例：

  const { mutate } = useMutation(submitFormApi);
  const handleSubmit = () => { /* 遗漏了mutate调用 */ };
  

  正确写法：

  const { mutate } = useMutation(submitFormApi);
  const handleSubmit = () => { mutate(yourFormData); };
  

• 事件绑定错误
  检查提交按钮的onClick或表单的onSubmit是否正确绑定处理函数：

  • 别写成onClick={handleSubmit()}（这会在组件渲染时立即执行函数，而非点击时），应该用onClick={handleSubmit}
  • 确认绑定的函数没有因为作用域问题丢失（比如未用useCallback包裹导致每次渲染生成新函数，或箭头函数使用错误）

• mutation函数本身有问题
  确保传给useMutation的第一个参数是能返回Promise的异步函数，比如：

  const submitFormApi = async (formData) => {
    return fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify(formData),
      headers: { 'Content-Type': 'application/json' }
    });
  };
  

  如果这个函数没有正确返回Promise，mutation也无法正常触发。

• 组件意外重渲染重置状态
  如果点击提交后组件发生不必要的重渲染，useMutation的状态会被重置回初始值。检查组件的依赖项数组（比如useEffect、useCallback的deps）是否设置正确，避免无意义的重渲染。

内容的提问来源于stack exchange，提问作者Shams Ur Rahman