<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>