无法从 Promise 的 then 函数设置状态

IT技术 javascript reactjs
2021-03-30 13:57:04

我正在尝试更新promise我使用该fetch函数收到的状态。

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);
}

它现在也不起作用。又是同样的错误。

4个回答

这是因为 的范围this，所以当您尝试使用Function.prototype.bind. 你的错误是你没有一直绑定到最后一个匿名函数。您可能想要做的是一直使用箭头函数，如下所示：

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

箭头函数始终保持 的上下文this。

抱歉，刚才发现我没有this正确绑定变量。

现在，它是固定的。 

componentDidMount(){

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

    const response = responseText.json();

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

  }.bind(this));

}

你的第二个Promise没有当前的this上下文。您也可以在这里使用箭头函数。

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

此外，链接而不是嵌套您的Promise将有助于提高可读性，并可能帮助您避免回调地狱。

你也有错误的 setState 方法它应该看起来像 setState({name : 'string'})

其它你可能感兴趣的问题
上一篇React Router v4 在表单提交时重定向 下一篇传播运算符在react抛出意外令牌错误