React Query On Success 不会触发

Question

我目前遇到一个无法解释的问题。我使用 React、typescript 和 react query。我工作的代码是双模态的，当单击第二个模态的拒绝按钮时，通过反应查询启动调用，然后我们执行 onSuccess。

如果我将挂钩调用移至第一个模式，onSuccess 将触发。如果我将 OnSuccess 从第二个模式移动到钩子中，它也可以工作。

但我不明白为什么在这种情况下它不起作用... 请问有人有 idea/explanation 吗？

提前致谢。

下面是第一个模态的代码

import React from 'react'
import Button from '../Button'
import SecondModal from '../SecondModal'

interface FirstModalProps {
    isOpen: boolean
    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
    id?: string
}

const FirstModal = ({ id, isOpen, setIsOpen }: 
FirstModalProps) => {
    const [openRefuse, setOpenRefuse] = React.useState<boolean>(false)

return (
    <>
        <SecondModal isOpen={openRefuse} setIsOpen={setOpenRefuse} id={id} />
        <Button
            onClick={() => {
                setIsOpen(false)
                setOpenRefuse(true)
            }}
            text="refuse"
        />
    </>
)}

export default FirstModal

然后是第二个模态的代码

import React from 'react'
import ConfirmModal from '../../../../../shared/styles/modal/confirm'
import useUpdate from '../../hooks/use-update'

interface SecondModalProps {
    isOpen: boolean
    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
    id?: string
}

const SecondModal = ({ isOpen, setIsOpen, id }: SecondModalProps) => {
const { mutate: update } = useUpdate()

const updateT = () => {
    update(
        {
            id
        },
        {
            onSuccess: () => {
                console.log('OnSuccess trigger')
            }
        }
    )
}

return (
    <ConfirmModal
        close={() => {
            setIsOpen(false)
        }}
        isOpen={isOpen}
        validate={updateT}
    />
)}

export default SecondModal

然后挂钩

import { useMutation } from 'react-query'

interface hookProps {
    id?: string
}

const useUpdate = () => {
const query = async ({ id }: hookProps) => {
    if (!id) return
    return (await myApi.updateTr(id))()
}

return useMutation(query, {
    onError: () => {
        console.log('error')
    }
})}

export default useUpdate

Answer 1

传递给 .mutate 函数的回调仅在请求完成时组件仍处于挂载状态时执行。相反，useMutation 上的回调总是被执行。这是documented here, and I've also written about it in my blog here.

React Query On Success 不会触发

React Query On Success does not trigger

reactjs

react-hooks

react-query