es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Convertir Hooks de React a Clases pero obtener un error.

23 May, 2023 Programación

Quiero convertir un componente de React con hooks a un componente de clase, pero obtengo un error.

HOOKS

import React, { useEffect, useRef } from “react”;

const App = () => {
const refValt = useRef(null);

const myfuncValt = () => {
console.log(“222222222222222222222”);
};

useEffect(() => {
setTimeout(() => {
refValt.current.click();
}, 5000); //milisegundos
}, []);

return (

Valt

);
};

export default App;

CLASE

import React from “react”;

const myfuncValt = () => {
console.log(“222222222222222222222”);
};

class App extends React.Component {
constructor(props) {
super(props);
this.refValt = React.createRef(null);
}

componentDidMount() {
setTimeout(() => {
this.refValt.current.click();
}, 5000);
}

render() {
return (

Valt 

);

}
}

export default App;

Obtengo este error:

Traté de usar this.refValt.click(); Pero no funciona.

En realidad, sospecho que la diferencia entre createRef y useRef.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que estás intentando acceder a refValt antes de que se inicialice. Debes asegurarte de que refValt esté inicializado antes de intentar accederlo.

    En el componente de clase, debes inicializar refValt en el constructor.

    javascript
    constructor(props) {
    super(props);
    this.refValt = React.createRef(null);
    }

    Luego puedes acceder a él en componentDidMount de esta manera:

    javascript
    componentDidMount() {
    setTimeout(() => {
    this.refValt.current.click();
    }, 5000); //milisegundos
    }

    También puedes usar el enganche useRef en el componente funcional de esta manera:

    javascript
    const refValt = useRef(null);

    Luego puedes acceder a él en el enganche useEffect de esta manera:

    javascript
    useEffect(() => {
    setTimeout(() => {
    refValt.current.click();
    }, 5000); //milisegundos
    }, []);

Comments are closed.