useState React Hook por ejemplo

 useState()es un ejemplo de gancho de React incorporado que le permite usar estados en sus componentes funcionales. Esto no era posible antes de React 16.7 .

En el tutorial anterior aprendimos sobre React Hooks y qué problemas resuelven . Veamos ahora con un ejemplo cómo usar el useState()gancho incorporado para permitir que las funciones de los componentes tengan un estado local.

En el tutorial anterior, clonamos nuestro proyecto React / Axios / Django e instalamos las dependencias del proyecto, incluido React 16.7 alpha, que brinda soporte para React Hooks.

Nuestra aplicación front-end tiene dos componentes React:

• CustomerCreateUpdate: para crear y actualizar clientes,
• CustomersList: para listar clientes

Las solicitudes de API enviadas con Axios se encapsulan en la CustomersService.jsclase.

Los dos componentes utilizan clases de componentes.

Antes de sumergirnos en la práctica, veamos algo de teoría sobre el useState()anzuelo.

¿Por qué usar useState?

Antes de React 16.7, si está utilizando componentes funcionales en su aplicación, de repente tiene el requisito de agregar un montón de estados a su función; solo tiene una solución que es convertir su función en una clase que se extiende, React.Componentluego usará this.statepara agregar el estado inicial y setState()actualizarlo.

Ahora, con la última versión de React, aún puede usar componentes funcionales y aprovechar todas las funciones, como los métodos de estado y ciclo de vida mediante ganchos.

En este tutorial, buscaremos principalmente en el useState()gancho.

Tenga en cuenta que los Hooks se encuentran actualmente en versión alfa , por lo que aún no están listos para la producción. Esto también significa que la API puede cambiar.

¿Qué hace useStateexactamente?

La useStatefunción es un gancho integrado que se puede importar desde el reactpaquete. Le permite agregar estado a sus componentes funcionales. Usando el useStategancho dentro de un componente de función, puede crear un fragmento de estado sin cambiar a componentes de clase.

Existen algunas diferencias entre el estado de manejo en funciones y clases:

• En los componentes de la clase, el estado es un objeto al que se accede mediante this.state; Simplemente agrega propiedades en este objeto para agregar un estado inicial y luego usa setState()para cambiarlo más tarde.
• En componentes de función y uso useState; el estado no es necesariamente un objeto. Puede ser una matriz, un número, un booleano o una cadena, etc. Puede realizar varias llamadas a useStatepara crear una sola pieza de estado con un valor inicial, pero también la función que se usa para cambiar ese estado más adelante.

Entender useStatecon el ejemplo

Ahora, veamos un ejemplo de cómo useStatecrear un componente de función con estado.

Este es un ejemplo truncado del CustomerCreateUpdatecomponente:

import React, { Component } from 'react';
import CustomersService from './CustomersService';
const customersService = new CustomersService();

class CustomerCreateUpdate extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount(){}
    handleCreate(){
        customersService.createCustomer(
          {
            "first_name": this.refs.firstName.value,
            "last_name": this.refs.lastName.value,
            "email": this.refs.email.value,
            "phone": this.refs.phone.value,
            "address": this.refs.address.value,
            "description": this.refs.description.value
        }          
        )
    }
    handleUpdate(pk){}
    handleSubmit(event) {}
    render() {}
}
export default CustomerCreateUpdate;

Este componente se extiende React.Component. Esto permite que el componente utilice el componentDidMountevento del ciclo de vida y this.refsacceda a los campos del formulario. Veremos en la siguiente parte, cómo acceder a estas características desde un componente de función usando ganchos como useEffect()y useRef().

Este es un ejemplo truncado del CustomersListcomponente que está disponible en este archivo:

import React, { Component } from 'react';
import CustomersService from './CustomersService';

const customersService = new CustomersService();

class CustomersList extends Component {

  constructor(props) {
    super(props);

    this.state = {
      customers: [],
      nextPageURL: ''

    };
    /*...*/

  }  
  componentDidMount() {
    var self = this;
    customersService.getCustomers().then(function (result){

      self.setState({ customers: result.data, nextPageURL: result.nextlink})
    });
  }

  handleDelete(e,pk){    
  }

  nextPage(){    
  }

  render() {
    return (
      <div className="customers--list">
          <table className="table">
          <-- Truncated -->

            <tbody>
            {this.state.customers.map( c =>

              <tr key={c.pk}>
              <!-- Truncated -->
              </tr>)}
              </tbody>
          </table>

      </div>
    );
  }
}

export default CustomersList;

Este componente extiende React.Componenty usa el this.stateobjeto para mantener el estado que contiene la matriz de clientes y la nextPageURLcadena que almacena el enlace a la siguiente página de datos para obtener de la API de Django. También usamos el setState()método para actualizar el estado una vez que obtenemos datos del servidor usando el customersService.getCustomers()método.

En el render()método recorremos la this.state.customersmatriz y mostramos las filas de nuestra tabla.

Ahora queremos convertir este componente de clase en un componente de función y poder mantener el estado de nuestra función como en el ejemplo de arriba.

import React, { useState } from 'react';

import CustomersService from './CustomersService';

const customersService = new CustomersService();

function CustomersList(props){

  const [customers, setCustomers] = useState([]);
  const [nextPageURL, setNextPageURL] = useState('');

    function handleDelete(e, pk){}
    function nextPage(){}

    return (
      <div className="customers--list">
          <table className="table">
          <thead key="thead">
          <tr>
            <!-- Truncated --> 
          </tr>
          </thead>

            <tbody>
            {customers.map( c =>

              <tr key={c.pk}>
                <!-- Truncated -->
              </tr>)}
              </tbody>
          </table>  
          <button className="btn btn-primary" onClick= { nextPage }>Next</button>

      </div>
    );
}

El useStategancho devuelve una matriz con 2 elementos. Usamos el uso de desestructuración de matrices para asignar nombres a los dos elementos. El primer elemento es el valor inicial del estado y el segundo elemento es una función para establecer el estado; que puede llamar con un nuevo valor para establecer el estado relacionado.

A continuación, en el componentDidMountmétodo de ciclo de vida que se activa cuando el componente está montado en el DOM, enviamos una solicitud al servidor, nos suscribimos al Observable y luego llamamos al setStatemétodo

this.setState({ customers: result.data, nextPageURL: result.nextlink})

Podemos lograr este mismo comportamiento usando el useEffect()gancho setCustomers()y las setNextPageURL()funciones que obtenemos del useState()gancho.

useEffect()es un gancho de React incorporado que se usa para ejecutar efectos secundarios y es equivalente a tres métodos de ciclo de vida componentDidMount, componentDidUpdatey componentWillUnmount. Veremos más sobre este gancho en un tutorial separado.

Justo debajo del useState()gancho en la función de su componente, agregue el siguiente código:

useEffect(() => {
    customersService.getCustomers().then(function (result) {
        setCustomers(result.data);
        setNextPageURL(result.nextlink);  
    });
});

Finalmente, simplemente agregue las implementaciones para handleDelete()y nextPage()en su CustomersListcomponente de función:

    function handleDelete(e, pk){
       customersService.deleteCustomer({pk : pk}).then(()=>{
         var newArr = customers.filter(function(obj) {
           return obj.pk !== pk;
         });
         setCustomers(newArr);
       });
    }
    function nextPage(){

      customersService.getCustomersByURL(this.state.nextPageURL).then((result) => {
         setCustomers(result.data); 
         setNextPageURL(result.nextlink);
      });      
    }

Nuevamente, simplemente usamos las funciones setCustomers()y setNextPageURL()devueltas al desestructurar la matriz devuelta por el useState()gancho.

Conclusión

En este tutorial, hemos visto por ejemplo cómo usar useStatehook para crear estados dentro de componentes funcionales en React.

En el siguiente tutorial, veremos otro gancho incorporado importante useEffectque puede usarse para ejecutar efectos secundarios en los componentes de su función.