Question

React 应用程序抛出错误无法读取嵌套承诺中未定义的属性“setState”

2019-11-13

77

javascript reactjs

在我的 React 应用程序中，嵌套的 promise 调用中出现此错误

Cannot read property 'setState' of undefined

奇怪的是，在 promise 之外，将值设置为 true 和 false 都没有问题。

console.log('about to set false')
this.setState({
    loadingMedications: false                    
}); 
console.log('about to set true')
this.setState({
    loadingMedications: true                    
}); 


SAIIndexedDB(response.data).then(function(result){
    this.setState({
         loadingMedications: false                    
    });  
})
.catch(function(error){
    console.log('error', error);
});

因此，上面的控制台输出正常且没有错误但是在 promise 中，catch 抛出了错误 - 这个 promise 需要大约一分钟才能返回，因为它正在将 170k 条记录加载到离线 indexeddb 数据库中，然后返回，因此 loadingMedications 是一个加载微调器，需要将其设置为 false 才能隐藏它。

想知道为什么吗？

Answer 1

问题出在 this 。

除了 this，

SAIIndexedDB(response.data).then(function(result){
    this.setState({
         loadingMedications: false                    
    });  
})

你需要使用自动绑定 this 的箭头函数，

SAIIndexedDB(response.data).then((result) => {
    this.setState({
         loadingMedications: false                    
    });  
})

Answer 2

另一个解决方案是将 this 分配给一个变量并在回调中使用该变量

const self = this;
SAIIndexedDB(response.data).then(function(result){
    // replace $this with $self
    self.setState({
         loadingMedications: false                    
    });  
})
.catch(function(error){
    console.log('error', error);
});