Tengo una función que envió una acción. Me gustaría mostrar un cargador antes y después de la acción. Sé que reacciona componiendo el objeto pasado a setState . la pregunta es cómo puedo actualizar la propiedad de forma asíncrona:
handleChange(input) { this.setState({ load: true }) this.props.actions.getItemsFromThirtParty(input) this.setState({ load: false }) }Básicamente, todo funcionó muy bien si puse esta propiedad como parte del estado de la aplicación (usando Redux), pero realmente prefiero llevar esta propiedad solo al estado del componente.
puede envolver setState en una promesa y usar async/await como se muestra a continuación
setStateAsync(state) { return new Promise((resolve) => { this.setState(state, resolve) }); } async handleChange(input) { await this.setStateAsync({ load: true }); this.props.actions.getItemsFromThirtParty(input); await this.setStateAsync({ load: false }) }Fuente: ASYNC AWAIT con REACT
Envuelve el resto de tu código en la devolución de llamada del primer setState :
handleChange(input) { this.setState({ load: true }, () => { this.props.actions.getItemsFromThirtParty(input) this.setState({ load: false }) }) } Con esto, se garantiza que su load se establezca en true antes de que se llame a getItemsFromThirtParty y la load se establezca de nuevo en false .
Esto supone que su función getItemsFromThirtParty es síncrona. Si no es así, conviértalo en una promesa y luego llame al setState final dentro de un método then() encadenado:
handleChange(input) { this.setState({ load: true }, () => { this.props.actions.getItemsFromThirtParty(input) .then(() => { this.setState({ load: false }) }) }) }Aquí hay una implementación mecanografiada de un setState "async-await":
async function setStateAsync<P, S, K extends keyof S>( component: Component<P, S>, state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | Pick<S, K> | S | null ) { return new Promise(resolve => component.setState(state, resolve)); }