useMutation 状态始终为“idle”且“isLoading”始终为“false”-react-query

Question

所以我使用react-query来处理API请求。当前的问题是，当我尝试提交表单数据、发布请求时，突变状态始终处于空闲状态，并且加载始终为 false。我还使用 zustand 进行状态管理。

这是 useSubmitFormData 挂钩。Post 请求按预期执行，只是突变状态和 isLoading 没有改变。

export const useSubmitFormData = () => {
  const { postDataPlaceholder } = usePlaceholderApi();
  // data which is submiting is getting from the store - reducer
  const { data, filesToUpload } = useFormDataStore();

  const { mutate, status, isLoading } = useMutation(() => postDataPlaceholder({ data }), {
    onMutate: () => console.log('onMutate', status),
    onSuccess: (res) => console.log(res),
    onError: (err) => console.log('err', err),
  });

  return {
    submitForm: mutate,
    isLoading,
  };
};

现在在 FormPage.jsx 上它是这样触发的：

const { submitForm, isLoading } = useSubmitFormData();

const onSubmit = () => submitForm();

这就是 usePlaceholderApi 的样子。它是一种自定义钩子，旨在结合使用 axios 和拦截器来处理授权令牌。

const usePlaceholderApi = () => {
  const { post } = usePlaceholderAxios();

  return {
    postDataPlaceholder: async (data) => post('/posts', { data }),
  };
};

export default usePlaceholderApi;

这就是usePlaceholderAxios。

import axios from 'axios';

const usePlaceholderAxios = () => {
  axios.interceptors.request.use(async (config) => {
    const api = 'https://jsonplaceholder.typicode.com';

    if (config.url.indexOf('http') === -1) {
      // eslint-disable-next-line no-param-reassign
      config.url = `${api}${config.url}`;
    }

    return config;
  });

  return {
    get: (url, config) => axios.get(url, config),
    post: (url, data, config) => axios.post(url, data, config),
  };
};

export default usePlaceholderAxios;

有什么想法这里可能会出问题吗？我错过了什么吗？还尝试直接在mutation中调用axios，中间不使用usePlaceholderApi钩子，但结果相同。

Answer 1

我设法通过创建钩子流来解决完全相同的问题。就我而言，我更改了将两个独立的钩子导入到一个钩子中。

由此

const { tasks, createTask, deleteTask } =
    useMutateTask()

  const { handleSubmit, onSubmit, register } =
    useTaskForm()

对此

  const {
    handleSubmit,
    onSubmit,
    register,
    tasks,
    createTask,
    deleteTask,
  } = useTaskForm()