Saltar al contenido

Obtención de datos y actualización del estado en una clase de reacción

El problema que estamos tratando de resolver es:

La pregunta entonces, es, «¿Dónde dentro de mi componente hago esa petición?» La respuesta está en uno de los métodos del ciclo de vida.

Obtención de datos y actualización del estado en una clase de reacción
Obtención de datos y actualización del estado en una clase de reacción

Métodos del ciclo de vida de los componentes de la clase

Aunque hay varios métodos de ciclo de vida en un componente de React, los métodos en los que nos centraremos para las peticiones de fetch son componentDidMount() y componentWillUnmount().

12345678910111213141516171819importReactfrom$0027react$0027;classProductListextendsReact.Componente{componenteDidMount(){/// make fetch request}componenteWillUnmount(){// make fetch request}render(){return(<ul><li />/ul>)}}

javascript

componenteWillUnmount()

El método componentWillUnmount() se utiliza cuando se necesita realizar una acción cuando el componente se está desmontando. Los escenarios más comunes incluyen la cancelación de la suscripción de un oyente en tiempo real o el seguimiento de un evento de desmontaje. En el resto de los ejemplos de esta guía, no necesitaremos el método componentWillUnmount() , por lo que trabajaremos con el método componentDidMount() .

componenteDidMount()

De acuerdo con la documentación de React:

El método de ComponenteDidMount es un gran lugar para solicitar datos del servidor ya que aunque el ajuste del estado causará un segundo renderizado, ocurre antes de que el navegador actualice la pantalla. El usuario no verá el estado intermedio.

Entonces, ¿cómo actualizo el estado?

Lo que intentamos hacer es buscar una lista de libros de Harry Potter, y mostrarlos en una lista.

Primero querría poner un objeto de libros en nuestro estado inicial:

12345classBookListextendsReact.Componente{ estado ={ libros:[]}}

javascript

Convertiremos nuestros libros en una lista no ordenada como esta:

  • Harry Potter y la Piedra de los Hechiceros
  • Harry Potter y la Cámara de los Secretos
  • Harry Potter y el prisionero de Azkaban
  • etc
123456789101112131415classBookListextendsReact.Componente{estado ={libros:[]}render(){retorno(};{este.estado.libros.mapa((libro)={libro)};(};li clave={libro.id};{nombre.libro}</li>))}</ul.;)}

javascript

Para poblar nuestro estado con libros, querremos usar el método del ciclo de vida del componenteDidMount().

123456789..componenteDidMount(){fetch($0027https://some-api.com/harry-potter$0027).then((response)=> response.json()).then(booksList={N-Esta.setState({libros: booksList });});}..

javascript

¿Qué acaba de pasar exactamente?

Lo que está pasando aquí es:1. El componente comenzará a insertarse en el DOM.2. El renderizado inicial ocurre (con una matriz vacía para libros ).3. Entonces el componenteDidMount() se llama4. Una vez que la petición termina con éxito, se llama a setState() y la propiedad books se actualizará con todos los libros de Harry Potter.

Al llamar a setState() se activa un nuevo renderizado y cada libro se mostrará ahora en la lista no ordenada.

Aquí está el ejemplo completo:

1234567891011121314151617181920212223classBookListextendsReact.Componente{ state ={ books:[]}componentDidMount(){fetch($0027https://some-api.com/harry-potter$0027).then((response)=> response. json()).then(booksList={N-este.setState({ libros: booksList });});}render(){retorno(<ul};{este.state.books.map((book)={N-;(<li key={book.id};{nombre.del.libro}</li>))}</ul>)}}

javascript