React setState avec promesse comme callback

Question

J'ai reçu une erreur en essayant de SetState en utilisant une Promise comme callback dans React. Ceci est probablement dû à une erreur de ma part et j'aimerais avoir quelques éclaircissements sur le SetState dans React. Le message d'erreur que je reçois est le suivant.

ERR : "Invalid argument passed as callback. On attendait une fonction. Reçu à la place : [objet Promise]"

J'ai refactorisé mon exemple de code ci-dessous (modifier) pour essayer de fournir une utilité aux autres.

    this.setState({ value: v }, this.callAsync)

// Async function 

  callAsync = async () => {
    await this.props.foo({
    // Something async-y
   })
 .then(success => console.log(success)
 }

Answer 1

Re le code dans votre question initiale :

this.setState({ value: v }, this.callAsync())

En async fonction toujours retourne une promesse, qui n'est pas (bien sûr) un callback. Dans votre cas, cette promesse se résout avec undefined comme vous n'avez pas fait de return dans votre callAsync .

Si votre objectif est d'appeler callAsync après que la mise à jour de l'état soit terminée, puis enveloppez l'appel dans une autre fonction, par exemple :

this.setState({value: v}, async () => {
    try {
        await this.callAsync();
    } catch (e) {
        // handle error
    }
});

o

this.setState({value: v}, () => {
    this.callAsync().catch(e => {
        // handle error
    });
});

Notez qu'il est essentiel de gérer les erreurs potentielles ; sinon, vous obtiendrez des erreurs de résolution non gérées si la promesse retournée par this.props.foo est rejeté.

---

Re le code dans votre question modifiée :

C'est juste un cas simple de this n'étant pas ce que vous attendez dans le callback, car décrite en détail dans les réponses à cette question . La solution ci-dessus également fonctionne pour cela, commodément ; c'est l'une des solutions listées par les réponses ici. Et elle gère correctement les erreurs, ce que certaines des autres réponses à cette question (l'utilisation de this.callAsync.bind(this) par exemple) ne le fera pas.