如何在表单组件中获取结果

Question

我是react的新手。我有这段代码插入数据到数据库这段代码使用react查询

import { API_ENDPOINTS } from '@framework/utils/api-endpoints';
import http from '@framework/utils/http';
import { useMutation } from 'react-query';
export interface ReviewFormValues {
title: string;
name: string;
email: string;
cookie: string;
description: string;
product_id: number | string;
rating: number;
}
async function addReview(input: ReviewFormValues) {
const { data } = await http.post(API_ENDPOINTS.REVIEWS, input);
return {
data: data,
};
}
export const useAddReviewMutate = () => {
return useMutation((input: ReviewFormValues) => addReview(input), {
onSuccess: (data: any) => {
console.log(data); // see returned data successfully 
return data; // trying to return the data to catch it.
},
onError: (data) => {
console.log(data, 'Checkout error response');
},
});
};

和在我的表单组件提交时，我需要得到的数据来显示它和清除表单。

function onSubmit(values: ReviewFormValues) {
const res = addReview(values);
console.log(res); // undefined 
if (isSuccess) { 
console.log(res); // not run
console.log('success');
}
}

Answer 1

有两种解决方案

第一个是使React query中的查询无效，只要请求是ok的，这将迫使React query做一个重新取回

最后一个是调用一个fetcher方法每当isSuccess为真，这可以通过使一个布尔标志默认为假来处理，当请求是ok的，这个布尔标志将被更改为真，并做一个重新取回你需要添加这个标志到一个useEffect深度和运行fetcher方法在它的回调。或者你可以创建一个条件来做同样的事情

我仍然推荐第一种方法，因为它更容易、更方便。

演示第一个解决方案的代码

/**
adding "invalidateQueries" method inside of onSuccess callback will automatically invalidate the data which will force react query to do a refetch.
*/
const mutation = useMutation({
mutationFn: someMethod,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['the key of your query'] })
},
})