Typescript 在组件卸载时try 使用useEffect清除状态时发生冲突.react +打字

我试图在组件卸载时使用useEffect清理状态，但在我try 设置状态时它会干扰我.我的代码基于在客户端中单击并将此客户端ID设置为发送API请求:

const setClient = () => {
    setClientIdForRegister(id)
    setClientNameForRegister(nome)
  }

return (
    <ClientSearchResultInfos onClick={setClient}>
      <div className="client_and_email">
        <h2>{nome}</h2>
        <span>{email}</span>
      </div>
      <CaretRight size={30} />
    </ClientSearchResultInfos>
)

请求:

const handleRegisterReceipt = async (data: FormDataProps) => {
    try {
      const dataToSend = {
        cliente: {
          id: clientIdForRegister,
        },
        dataPagamento: data.dataPagamento,
        valor: data.valor,
      }

      const response = await api.post('/pagamentos', dataToSend)
}

当用户在客户端中单击时，应该使用客户端的名称设置表单输入值:

useEffect(() => {
    const getClientName = async () => {
      if (clientNameForRegister) {
        setValue('cliente', clientNameForRegister)
      }
    }

    getClientName()
  }, [setValue, clientNameForRegister])

我在父组件useEffect中使用了返回，因此当我离开页面并返回时，id和名称再次为空

// parent component: 

const cleanUp = () => {
    setClientNameForRegister(null)
    setClientIdForRegister(null)
  }

  useEffect(() => {
    return cleanUp
  })

但这会导致发送的clientIdForRegister始终为空，因为组件总是重新呈现并运行清理.

我也试过这样做:

// parent component:

const isMountedRef = useRef<boolean>(true)

  useEffect(() => {
    return () => {
      isMountedRef.current = false

      if (isMountedRef.current) {
        setClientNameForRegister(null)
        setClientIdForRegister(null)
      }
    }
  })

这种方式不会将clientIdForRegister设置为null，但在卸载组件时不会清除名称和ID.

有没有一种方法可以在用户每次离开页面时清除状态，同时仍然发送clientIdForRegister？