<p>Saya cuba mencipta apl Todo menggunakan pertanyaan reaktif, tetapi saya menghadapi masalah keadaan perlumbaan. Saya mempunyai halaman tugasan di mana pengguna mengemas kini/membuat tugasan baharu dan kemudian mengklik simpan. Proses menyimpan mungkin mengambil masa lebih kurang 3 saat bergantung pada sambungan internet pengguna. Selepas mengedit item tugasan, pengguna kekal dalam halaman tugasan. Selepas membuat item tugasan baharu, pengguna akan menavigasi ke halaman item tugasan. </p> <p>Masalahnya, Apabila pengguna membuat/mengemas kini todo dan kemudian mengklik tunjukkan todo modal (ini adalah komponen luaran, saya tidak boleh mengeditnya) Mod memaparkan tugasan sebelum mengedit/kosongkan jika ia adalah tugasan baharu</p> <p>Apabila saya nyahpepijat isu, saya dapat melihat bahawa pertanyaan tindak balas mendapat item todo selepas modal dihidupkan. Jika saya menutup modal dan membukanya semula, ia memaparkan item tugasan yang dikemas kini. </p> <pre class="brush:php;toolbar:false;">const {todo} = useTodoQuery() const openModal = () => kembali ( <TodoModalButton onClick={openModal}>Open Todo Preview Modal</TodoModalButton> )</pra> <pre class="brush:php;toolbar:false;">const useTodoQuery = () => const {data, ...rest} = useQuery(['todo', todoId], async () => { jika (todoId) { pulang tunggu getTodo(todoId) } kembali null; }) pulangkan {data, ...rehat} }</pre> <pre class="brush:php;toolbar:false;">const queryClient = new QueryClient({ pilihan lalai: { saspens: palsu, keepPreviousData: benar, } })</pre> <p>Jika saya mengalih keluar keepPreviousData, todo akan tidak ditentukan. </p> <pre class="brush:php;toolbar:false;">const todoMutation = useMutation( ['todo'], getUpdatedTodo, {onSuccess: () => queryClient.invalidateQueries(['todo', todoId])} );</pra> <p>Saya cuba menggunakan <kod>{onSuccess: (todo) => queryClient.setQueryData(['todo', todoId], todo)}</code> Tetapi kesannya tidak ideal. </p>