什么时候设置表单的初始值？

Question

我有这些代码，如果用户第一次打开表单对话框，效果很好。

function PostFormDialog({ id }) {
  const queryClient = useQueryClient()
  const post = useQuery(['post', id], () => fetchPost(id))
  const update = useMutation(() => updatePost(formValue), {
    onSuccess: () => {
      queryClient.invalidateQueries(['post', id])
    },
  })
  if (post.isLoading) {
    return 'loading...'
  }
  return (
    <Dialog {...dialogProps}>
      <Form initialValue={post} onSubmit={update.mutate} />
    </Dialog>
  )
}

但是当我提交一次表单时，我很快再次打开对话框，它会显示最后的数据。此时正在检索数据，但 isLoading 为 false。

我想要：

• 打开表单对话框后，如果数据过期，等待数据加载完毕，显示loading...
• 如果你正在编辑表单，切换标签可能会导致数据被检索，但loading...此时不显示

这对我来说很难。我可以通过使用乐观更新来避免它，但是有更好的方法吗？

Answer 1

尝试使用 react 查询选项。例如：

useQuery(
  ["post", id],
  () => fetchPost(id),
  { refetchOnMount: true }
);