¿Puedo ejecutar una función después de que setState termine de actualizarse?

Solución:

setState(updater[, callback]) es una función asíncrona:

https://facebook.github.io/react/docs/react-component.html#setstate

Puede ejecutar una función después de que setState esté terminando usando el segundo parámetro callback como:

this.setState({
    someState: obj
}, () => {
    this.afterSetStateFinished();
});

Lo mismo se puede hacer con ganchos en el componente funcional React:

https://github.com/the-road-to-learn-react/use-state-with-callback#usage

Mira useStateWithCallbackLazy:

import { useStateWithCallbackLazy } from 'use-state-with-callback';

const [count, setCount] = useStateWithCallbackLazy(0);

setCount(count + 1, () => {
   afterSetCountFinished();
});

render será llamado cada vez que usted setState para volver a renderizar el componente si hay cambios. Si mueve su llamada a drawGrid allí en lugar de llamarlo en tu update* métodos, no debería tener ningún problema.

Si eso no funciona para usted, también hay una sobrecarga de setState que toma una devolución de llamada como segundo parámetro. Debería poder aprovechar eso como último recurso.

Haciendo setState devolver un Promise

Además de pasar un callback para setState() método, puede envolverlo alrededor de un async función y utilizar la then() método, que en algunos casos puede producir un código más limpio:

(async () => new Promise(resolve => this.setState({dummy: true}), resolve)()
    .then(() => { console.log('state:', this.state) });

Y aquí puedes dar un paso más y hacer un reutilizable setState función que en mi opinión es mejor que la versión anterior:

const promiseState = async state =>
    new Promise(resolve => this.setState(state, resolve));

promiseState({...})
    .then(() => promiseState({...})
    .then(() => {
        ...  // other code
        return promiseState({...});
    })
    .then(() => {...});

Esto funciona bien en Reaccionar 16.4, pero no lo he probado en versiones anteriores de Reaccionar aún.

También vale la pena mencionar que mantener su llamar de vuelta codificar en componentDidUpdate El método es una mejor práctica en la mayoría de los casos, probablemente en todos.

---

---

Utiliza Nuestro Buscador