使用React查询更新ant design表单的几个字段。然后使用 queryclient.invalidateQuesries 更新页面。页面焦点松动

Question

我使用 ant design 使用 & onFinish= {onFinish} 更新了表单的几个字段

    const onFinish = (values) => {
//pass the field to mutate destructured from useMutation      
mutate(values)    
 }

使用 React Query 中的 useMutation 和 axios 与服务器交互。

    const {mutate, isLoading} = useMutate('updatedData', {
onSuccess:() => {queryClient.invalidateQueries()}, 
onError: .... })

调用invalidateQueries，更新页面，以便我可以立即看到更改的UI。

现在的问题是，它将页面带到初始状态，因此如果我对某些列进行了更改，那么我必须再次单击该列才能查看更改。

我想保持相同的状态，并且不必再次单击某些列来查看 UI 更改。

Answer 1

为了在使用 React Query 更新后将焦点保持在表单上并防止页面重置为初始状态，您可以尝试以下方法：

1. 如果没有必要，请避免

   invalidateQueries

   。相反，您可以 直接在

   onSuccess

   回调中更新 React Query 缓存， 这将避免重新获取数据并保留页面状态。

   const { mutate, isLoading } = useMutation(updateData, { onSuccess: (updatedValues) => { queryClient.setQueryData('updatedData', (oldData) => ({ ...旧数据， ...updatedValues, // 将更新的字段与现有数据合并 })); }, onError：（错误）=> { 控制台.错误（错误）； }, });

2. 有选择地使用

   invalidateQueries

   ：如果您需要仅重新获取部分 的数据，考虑使缓存的特定部分无效 而不是整个查询。

3. 恢复焦点：如果焦点仍然重置，请手动将焦点设置在 通过选择突变后受影响的字段

   document.getElementById

   或使用

   refs

   。

这应该可以帮助您更新数据，而不会失去焦点或重置表单状态。