React - Cómo usar la devolución de llamada setState

React - Cómo usar la devolución de llamada setState

En este tutorial, aprenderemos cómo usar la función de devolución de llamada en el método reaccionar setState usando ejemplos.

Índice
  1. método setState()
  2. Uso de la devolución de llamada setState (componentes de clase)
  3. Usando la devolución de llamada setState en ganchos

método setState()

En reacción, el setState() El método se utiliza para actualizar el estado del componente.

cada vez que llamamos a un método setState, react renderizará el componente con una interfaz de usuario actualizada.

setState(updater,callback)

Nota: El método setState() no garantiza que actualice el estado del componente inmediatamente, por lo que no podemos confiar en el this.state después de llamar a setState, en su lugar podemos usar el devolución de llamada setState.

Se llama a la función de devolución de llamada setState, una vez que setState la actualización está completa y el componente está renderizado.

Uso de la devolución de llamada setState (componentes de clase)

Para usar la devolución de llamada setState, necesitamos pasar la función de devolución de llamada como el segundo argumento al setState() método.

En este ejemplo, usamos la función de devolución de llamada setState para realizar una llamada API después de que se haya completado una actualización de setState.

Aplicación.js

import React from "react";

class App extends React.Component {
  state = {
    count: 0
  };

  increment = () => {
    this.setState(
      { count: this.state.count + 1 },
      this.checkCount     );
  };

  checkCount = () => {
    if (this.state.count >= 10) {      fetch("https://jsonplaceholder.typicode.com/todos/1")
        .then(response => response.json())
        .then(json => console.log(json));
    }
  };

  render() {
    return (
      <div className="App">
        <p>{this.state.count}</p>
        <button onClick={this.increment}>increment</button>
      </div>
    );
  }
}

export default App;

La función de devolución de llamada setState this.checkCount es llamado una vez por this.state.count el valor se incrementa.

En el interior de this.checkCount función, agregamos una condición siguiente (this.state.count >= 10) para hacer la llamada a la API.

Usando la devolución de llamada setState en ganchos

En componentes funcionales, podemos usar el estado usando un useState() hook pero no hay un segundo argumento para agregarle una devolución de llamada.

En lugar de podemos usar el useEffect() colgar.

Ejemplo:

Aplicación.js

import React, { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const checkCount = () => {
    if (count >= 10) {
      fetch("https://jsonplaceholder.typicode.com/todos/1")
        .then(response => response.json())
        .then(json => console.log(json));
    }
  };


  useEffect(() => {
    checkCount();  }, [count]);

  return (
    <div className="App">
      <p>{count}</p>
      <button onClick={increment}>increment</button>
    </div>
  );
}

En el código anterior, pasamos el segundo argumento al useEffect() gancho que es una matriz con count valor ([count]), por lo que el gancho useEffect ejecuta la función de devolución de llamada cuando un count se cambia el valor.

Si quieres conocer otros artículos parecidos a React - Cómo usar la devolución de llamada setState puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas