0

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

这是 useSubmitFormData 钩子。发布请求按预期执行，只是突变状态和 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;

有什么想法可以在这里出错吗？我错过了什么吗？还尝试在突变中直接调用 axios，中间没有 usePlaceholderApi 挂钩，但结果相同。

4

1 回答 1

0

我认为您缺少data作为变异函数的变量的传递。

mutationFn: (variables: TVariables) => Promise<TData>
  • 必需的
  • 执行异步任务并返回承诺的函数。
  • variables 是一个对象， mutate 将传递给您的 mutationFn
const { mutate, status, isLoading } = useMutation(
  (data) => postDataPlaceholder({ data }),
  {
    onMutate: () => console.log('onMutate', status),
    onSuccess: (res) => console.log(res),
    onError: (err) => console.log('err', err),
  },
);
于 2022-03-02T06:01:13.123 回答