<p>Ich versuche, eine Todo-App mithilfe reaktiver Abfragen zu erstellen, habe jedoch ein Problem mit der Rennbedingung. Ich habe eine Aufgabenseite, auf der der Benutzer eine neue Aufgabe aktualisiert/erstellt und dann auf Speichern klickt. Der Speichervorgang kann je nach Internetverbindung des Benutzers ca. 3 Sekunden dauern. Nach der Bearbeitung eines To-Do-Elements bleibt der Benutzer auf der To-Do-Seite. Nach dem Erstellen eines neuen Aufgabeneintrags navigiert der Benutzer zur Aufgabeneintragsseite. </p> <p>Das Problem ist, Wenn der Benutzer eine Aufgabe erstellt/aktualisiert und dann auf „Todo modal anzeigen“ klickt (dies ist eine externe Komponente, ich kann sie nicht bearbeiten) Im Modus wird die Aufgabe vor dem Bearbeiten/Leeren angezeigt, wenn es sich um eine neue Aufgabe handelt</p> <p>Wenn ich das Problem debugge, kann ich sehen, dass die Reaktionsabfrage die Aufgabenelemente abruft, nachdem das Modal aktiviert wurde. Wenn ich das Modal schließe und erneut öffne, werden die aktualisierten Aufgabenelemente angezeigt. </p> <pre class="brush:php;toolbar:false;">const {todo} = useTodoQuery() const openModal = () => zurückkehren ( <TodoModalButton onClick={openModal}>Todo-Vorschau-Modal öffnen</TodoModalButton> )</pre> <pre class="brush:php;toolbar:false;">const useTodoQuery = () => const {data, ...rest} = useQuery(['todo', todoId], async () => { if (todoId) { Rückkehr warte auf getTodo(todoId) } null zurückgeben; }) return {data, ...rest} }</pre> <pre class="brush:php;toolbar:false;">const queryClient = new QueryClient({ Standardoptionen: { Spannung: falsch, keepPreviousData: wahr, } })</pre> <p>Wenn ich keepPreviousData entferne, ist die Aufgabe undefiniert. </p> <pre class="brush:php;toolbar:false;">const todoMutation = useMutation( ['machen'], getUpdatedTodo, {onSuccess: () => queryClient.invalidateQueries(['todo', todoId])} );</pre> <p>Ich habe es mit versucht <code>{onSuccess: (todo) => queryClient.setQueryData(['todo', todoId], todo)}</code> Aber die Wirkung ist nicht ideal. </p>