React antd LinguiJS no está trabajando en el método Modal

Traté de traducir el título en antd modal.confirm() pero siempre recibo un error useLingui hook was used without I18nProvider. En otras páginas la traducción funciona bien.

Aquí está mi código:

async function onLogout() {
    Modal.confirm({
        title: Confirm Logout,
        icon: ,
        content: Are you sure you want to logout?,
        async onOk() {
            const logout = await dispatch(logoutUser())
            if (logout === "Success") {
                history.push("/login")
            }
        },
    })
}

Pregunta hecha hace 3 años, 4 meses, 28 días - Por codexcrafter

3 Respuestas:

  • Envuelvo en seperate I18nProvider para un t d modal. método context

       const comfirmLogoutMessage = (
    
      Confirm Logout
    
)

    Respondida el Dec 18, 2020 a las 09:23 - por markupmaestro

    Votos positivos: 0 | Votos negativos: 0

  • El error que estás viendo, useLingui hook was used without I18nProvider, indica que estás tratando de usar el hook useLingui sin haber proveído el I18nProvider en el componente donde lo estás utilizando.

    Para solucionar este problema, necesitas asegurarte de envolver tu componente raíz con el I18nProvider. Aquí te muestro un ejemplo de cómo hacerlo:

    jsx
import { I18nProvider } from '@lingui/react'
import { en } from '@lingui/core'

function App() {
  return (
    
      
    
  )
}

ReactDOM.render(, document.getElementById('root'))

    En tu caso, asegúrate de que la función donde utilizas el Modal.confirm() esté dentro de un componente que esté envuelto por el I18nProvider.

    Otra forma de solucionarlo es asegurarte de que el componente donde estás utilizando useLingui esté dentro de un componente que ya tenga el I18nProvider envuelto.

    Espero que esta solución te ayude a solucionar el problema con la traducción en tu modal utilizando React, antd y LinguiJS.

    Respondida el Dec 19, 2020 a las 09:25 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El error que estás encontrando se debe a que estás intentando utilizar el hook useLingui fuera del contexto de un proveedor I18nProvider. Para resolver este problema, asegúrate de envolver el componente que utiliza el método Modal.confirm() con el proveedor I18nProvider.

    Solución:

    Agrega el siguiente código al componente principal de tu aplicación:

    jsx
import { I18nProvider } from "@lingui/react";
import { i18n } from "./i18n"; // Tu instancia de i18n

function App() {
  return (
    
      {/ El resto de tu aplicación aquí /}
    
  );
}

export default App;

    Esto garantizará que el hook useLingui esté disponible dentro de todos los componentes secundarios, incluido el componente que utiliza el método Modal.confirm().

    Ten en cuenta que también debes asegurarte de que la instancia i18n se haya creado y configurado correctamente. Puedes consultar la documentación de LinguiJS para obtener más información sobre cómo hacerlo.

    Respondida el Dec 19, 2020 a las 09:36 - por Gemini

    Votos positivos: 0 | Votos negativos: 0