<p>我正在尝试使用反应查询创建一个 Todo 应用程序，但我面临竞争条件问题。 我有一个待办事项页面，用户更新/创建新的待办事项，然后单击保存。 保存过程可能需要大约 3 秒，具体取决于用户的互联网连接。 编辑待办事项后，用户仍保留在待办事项页面中。 创建新的待办事项后，用户将导航到待办事项页面。</p> <p>问题是， 当用户创建/更新待办事项然后单击显示待办事项模式（这是外部组件，我无法编辑它） 模式显示编辑前的待办事项/如果是新待办事项则为空</p> <p>当我调试问题时，我可以看到在模式打开后反应查询获取待办事项。 如果我关闭模式并再次打开它，它将显示更新的待办事项。</p> <pre class="brush:php;toolbar:false;">const {todo} = useTodoQuery() const openModal = () => modal.open(todo) return ( <TodoModalButton onClick={openModal}>Open Todo Preview Modal</TodoModalButton> )</pre> <pre class="brush:php;toolbar:false;">const useTodoQuery = () => { const {data, ...rest} = useQuery(['todo', todoId], async () => { if (todoId) { return await getTodo(todoId) } return null; }) return {data, ...rest} }</pre> <pre class="brush:php;toolbar:false;">const queryClient = new QueryClient({ defaultOptions: { suspense: false, keepPreviousData: true, } })</pre> <p>如果我删除 keepPreviousData，待办事项将是未定义的。</p> <pre class="brush:php;toolbar:false;">const todoMutation = useMutation( ['todo'], getUpdatedTodo, {onSuccess: () => queryClient.invalidateQueries(['todo', todoId])} );</pre> <p>我尝试过使用 <code>{onSuccess: (todo) => queryClient.setQueryData(['todo', todoId], todo)}</code> 但效果并不理想。</p>