Hola usuario de nuestro sitio, descubrimos la solución a lo que buscabas, deslízate y la hallarás un poco más abajo.
Solución:
Para la versión estable de ganchos (React Version 16.8.0+)
Para componentDidMount
useEffect(() =>
// Your code here
, []);
Para componentDidUpdate
useEffect(() =>
// Your code here
, [yourDependency]);
Para componentWillUnmount
useEffect(() =>
// componentWillUnmount
return () =>
// Your code here
, [yourDependency]);
Entonces, en esta situación, debe pasar su dependencia a este array. Supongamos que tienes un estado como este
const [count, setCount] = useState(0);
Y cada vez que aumenta el conteo, desea volver a procesar el componente de su función. Entonces tu useEffect debería verse así
useEffect(() =>
// count
, [count]);
De esta manera, cada vez que su conteo se actualice, su componente se volverá a procesar. Espero que esto ayude un poco.
Aunque la respuesta aceptada funciona, no se recomienda. Cuando tiene más de un estado y lo usa con useEffect, le avisará sobre agregarlo a la dependencia array o no usarlo en absoluto.
A veces causa el problema que puede generar resultados impredecibles. Así que te sugiero que hagas un pequeño esfuerzo para reescribir tu función como clase. Hay muy pocos cambios, y puedes tener algunos componentes como clase y otros como función. No está obligado a usar una sola convención.
Toma esto por ejemplo
function App()
const [appointments, setAppointments] = useState([]);
const [aptId, setAptId] = useState(1);
useEffect(() =>
fetch('./data.json')
.then(response => response.json())
.then(result =>
const apts = result.map(item =>
item.aptId = aptId;
console.log(aptId);
setAptId(aptId + 1);
return item;
)
setAppointments(apts);
);
, []);
return(...);
y
class App extends Component
constructor()
super();
this.state =
appointments: [],
aptId: 1,
componentDidMount()
fetch('./data.json')
.then(response => response.json())
.then(result =>
const apts = result.map(item =>
item.aptId = this.state.aptId;
this.setState(aptId: this.state.aptId + 1);
console.log(this.state.aptId);
return item;
);
this.setState(appointments: apts);
);
render(...);
Esto es solo por ejemplo. así que no hablemos de las mejores prácticas o posibles problemas con el código. Ambos tienen la misma lógica, pero el último solo funciona como se esperaba. Es posible que obtenga la funcionalidad de componentDidMount con useEffect ejecutándose durante este tiempo, pero a medida que crece su aplicación, hay posibilidades de que PUEDE enfrentar algunos problemas. Entonces, en lugar de volver a escribir en esa fase, es mejor hacerlo en una etapa temprana.
Además, la POO no es tan mala, si la Programación Orientada a Procedimientos fuera suficiente, nunca habríamos tenido la Programación Orientada a Objetos. A veces es doloroso, pero mejor (técnicamente, aparte de los problemas personales).
No hay componentDidMount en componentes funcionales, pero React Hooks proporciona una forma de emular el comportamiento utilizando el useEffect gancho.
pasar un vacio array como segundo argumento para useEffect() para ejecutar solo la devolución de llamada solo en el montaje.
Por favor, lea la documentación sobre useEffect.
function ComponentDidMount()
const [count, setCount] = React.useState(0);
React.useEffect(() =>
console.log('componentDidMount');
, []);
return (
componentDidMount: count times
);
ReactDOM.render(
Comentarios y puntuaciones
Recuerda que tienes la capacidad de añadir un enjuiciamiento certero si diste con el resultado.