所以我使用react-query来处理API请求。当前的问题是，当我尝试提交表单数据时，post请求，mutation状态总是空闲的，并且loading总是false。我还使用zustand进行状态管理。
这是useSubmitFormData钩子。Post请求按预期执行，只是mutation状态和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，中间不使用PlaceholderApi钩子，但结果相同。