無法從Promise的當時函數中設置狀態

Question

我試圖從使用fetch函數收到的promise中更新狀態。

componentDidMount(){ 

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

    var response = responseText.json(); 

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

    }); 
} 

我正在錯誤該setState不是功能

然後，我試圖bind(this)通過像下面的this值。

componentDidMount(){ 

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

    var response = responseText.json(); 

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

    }).bind(this); 
} 

它現在不工作了。同樣的錯誤再次。

Answer 1

對不起，剛纔發現我沒有正確綁定this變量。

現在，它是固定的。

componentDidMount(){ 

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

    var response = responseText.json(); 

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

    }.bind(this)); 
} 

Answer 2

您的第二個承諾沒有當前的this上下文。您也可以在這裏使用箭頭功能。

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

此外，鏈接，而不是嵌套你的承諾將有助於清晰度，並可能幫助您避免callback hell。

Answer 3

這是因爲this的範圍限定，因此當您嘗試使用Function.prototype.bind時，您會遇到某些問題。你的錯誤是，你不會將所有方法都綁定到最後一個匿名函數。你可能想要做的是使用箭頭功能一路，就像這樣：

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

箭頭功能始終保持this上下文。