Không thể setState từ chức năng sau đó của Promise

Question

Tôi đang cố gắng cập nhật trạng thái từ số promise mà tôi đã nhận được bằng cách sử dụng chức năng fetch.

componentDidMount(){ 

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

    var response = responseText.json(); 

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

    }); 
} 

tôi đã nhận được báo lỗi rằng setState không phải là một chức năng

Sau đó, tôi đã cố gắng để bind(this) để vượt qua giá trị this như dưới đây.

componentDidMount(){ 

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

    var response = responseText.json(); 

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

    }).bind(this); 
} 

Nó hiện không hoạt động. Cùng một lỗi nữa.

Answer 1

Xin lỗi, Vừa phát hiện ra rằng tôi đã không ràng buộc biến số this đúng cách.

Hiện tại, nó đã được sửa.

componentDidMount(){ 

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

    var response = responseText.json(); 

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

    }.bind(this)); 
} 

Answer 2

Lời hứa thứ hai của bạn không có ngữ cảnh this hiện tại. Bạn cũng có thể sử dụng chức năng mũi tên ở đây.

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

Ngoài ra, chuỗi thay vì lồng ghép lời hứa sẽ giúp bạn dễ đọc và có thể giúp bạn tránh callback hell.

Answer 3

Điều này là do phạm vi của this, vì vậy bạn đang sử dụng thứ gì đó khi bạn đang cố gắng sử dụng Function.prototype.bind. Sai lầm của bạn là bạn không ràng buộc tất cả các con đường xuống chức năng ẩn danh cuối cùng. Những gì bạn có thể muốn làm là sử dụng chức năng mũi tên tất cả các cách, như thế này:

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

chức năng mũi tên luôn giữ bối cảnh this.