Quiero tener múltiples devoluciones de llamada después de ejecutar this.setState ()

Este código funciona y this work is printed.

savePitch(e){
        this.setState({savedPitches: [...this.state.savedPitches, this.state.addNewPitch]})
        this.setState({addNewPitch: {
            id: this.state.addNewPitch.id + 1,
            pitchName: '',
            shortCut: '',
            subject: '',
            pitch: ''
        }},
        () => {console.log('this worked')},
        )
        this.toggleNewPitchForm()
    }

Sin embargo, si quiero ejecutar dos funciones, lo intenté a continuación, pero no funciona como se esperaba.

savePitch(e){
        this.setState({savedPitches: [...this.state.savedPitches, this.state.addNewPitch]})
        this.setState({addNewPitch: {
            id: this.state.addNewPitch.id + 1,
            pitchName: '',
            shortCut: '',
            subject: '',
            pitch: ''
        }},
        () => {console.log('this worked')},
        () => {console.log('then this worked')},
        )
        this.toggleNewPitchForm()
    }

¿Qué cambios debo hacer para que esto funcione como se esperaba?

2
Morgan Allen 12 nov. 2017 a las 22:47

2 respuestas

La mejor respuesta

Simplemente llame a los métodos secuencialmente dentro de una función de flecha:

this.setState(..., () => {
    (() => { console.log('one') })()
    (() => { console.log('two') })()
}
5
sventschui 12 nov. 2017 a las 19:51

Simplemente defina el método que llamará a los otros métodos.

const myMethod = () => {
  myMethod1();
  myMethod2();
  myMethod3();
};

this.setState({addNewPitch: {...}}, myMethod);
3
Jaich 27 ene. 2019 a las 09:12