0

我有一个简单的应用程序，它有一个表单和列表。目前，我正在使用查询 client.InvalidateQueries 在提交表单后更新用户列表。正如文档所说，使用 InvalidateQuery 将触发重新获取，但不知何故，在添加用户后我没有看到列表的更新。我错过了什么吗？

添加用户

import React, { useState } from 'react';
import { useFormik } from 'formik';
import Input from '../../elements/Input/Input';
import * as Yup from 'yup';
import { QueryClient, useMutation } from 'react-query';
import axios from 'axios';

const queryClient = new QueryClient();

const CreateItemView = () => {
  function gen4() {
    return Math.random().toString(16).slice(-4);
  }

  function generateID(prefix) {
    return (prefix || '').concat([gen4(), gen4(), gen4(), gen4(), gen4(), gen4(), gen4(), gen4()].join(''));
  }

  const mutation = useMutation(
    (formData) => {
      axios.post('http://localhost:8000/users', formData).then((response) => console.log(response));
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries('users');
      },
    },
  );

  const [data, setData] = useState([]);
  const initialValues = {
    id: '',
    name: '',
    email: '',
    channel: '',
  };
  const onSubmit = (values, { resetForm }) => {
    setData([...data, values]);
    const ID = generateID().toString();
    values.id = ID;
    mutation.mutate(values);
    resetForm();
  };
  const validationSchema = Yup.object({
    name: Yup.string().required('Required!'),
    email: Yup.string().email('Invalid format').required('Required!'),
    channel: Yup.string().required('Required!'),
  });
  const formik = useFormik({
    initialValues,
    onSubmit,
    validationSchema,
  });

  return (
    <div>
      <form onSubmit={formik.handleSubmit}>
        <Input type={'text'} name={'name'} id={'name'} label={'Name'} formik={formik} />
        <Input type={'email'} name={'email'} id={'email'} label={'Email'} formik={formik} />
        <Input type={'text'} name={'channel'} id={'channel'} label={'channel'} formik={formik} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default CreateItemView;

用户列表

import React from 'react';
import ListView from './ListView';
import { useQuery } from 'react-query';
import axios from 'axios';

const getUsers = async () => {
  const response = await axios.get('http://localhost:8000/users');
  return response.data;
};
const ListContainer = () => {
  const { data, isLoading, isFetching } = useQuery('users', getUsers);
  console.log('list', data);
  return <div>{isFetching ? 'loading...' : <ListView dataSource={data} />}</div>;
};

export default ListContainer;
4

2 回答 2

0

我认为您的问题的解决方案是替换它：

 onSuccess: () => {
        queryClient.invalidateQueries('users');
      },

这样 ：

onSettled:() => {
            queryClient.invalidateQueries('users');
          },
于 2022-02-21T10:31:45.540 回答
0

您必须在突变中返回fetch 函数。当onSuccesspromise 被解决时，处理程序将被触发。

const mutation = useMutation(
    (formData) => {
      return axios.post('http://localhost:8000/users', formData).then((response) => console.log(response));
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries('users');
      },
    },
  );
于 2022-02-22T12:39:46.397 回答