Impossibile impostareState dalla funzione then della Promessa

Question

Sto tentando di aggiornare lo stato da promise che ho ricevuto utilizzando la funzione fetch.

componentDidMount(){ 

fetch(url).then((responseText) => { 

    var response = responseText.json(); 

    response.then(function(response){ 
     this.setState(response); 
    }); 

    }); 
} 

stavo ottenendo l'errore che il setState non è una funzione

Poi, ho cercato di bind(this) per passare il valore this come qui di seguito.

componentDidMount(){ 

fetch(url).then((responseText) => { 

    var response = responseText.json(); 

    response.then(function(response){ 
     this.setState(response); 
    }); 

    }).bind(this); 
} 

Non funziona anche ora. Lo stesso errore di nuovo.

Answer 1

Siamo spiacenti, ho appena scoperto che non ho associato correttamente la variabile this.

Ora, è corretto.

componentDidMount(){ 

fetch(url).then((responseText) => { 

    var response = responseText.json(); 

    response.then(function(response){ 
     this.setState(response); 
    }); 

    }.bind(this)); 
} 

Answer 2

La seconda promessa non ha la corrente this contesto. Puoi anche usare una funzione freccia qui.

componentDidMount(){ 
    fetch(url).then((responseText) => { 
    return responseText.json(); 
    }) 
    .then((response) => { 
    this.setState(response); 
    }); 
} 

Inoltre, il concatenamento invece di nidificazione tue promesse aiuterà con la leggibilità e potrebbe aiutare a evitare callback hell.

Answer 3

Questo è a causa dell'ambito di this, quindi sei a qualcosa quando stai cercando di utilizzare Function.prototype.bind. Il tuo errore è che non ti leghi fino all'ultima funzione anonima. Quello che probabilmente vuole fare è funzioni direzionali di uso tutta la strada, in questo modo:

componentDidMount(){ 
    fetch(url) 
     .then((responseText) => responseText.json()) 
     .then((response) => this.setState(response)); 
} 

funzioni Freccia mantengono sempre il contesto di this.