babel es6使用react错误地定位异常

Question

我认为这是一个babel问题(不完全确定)。我的javascript控制台抛出的错误总是错误的。。。无论错误在我的代码中发生在哪里，它都指向我的handleFailure(serviceName，error)块。。。例如。。。调用this.foo()；在手牌成功后，甚至在我移动this.foo()时；到我的getItemById方法。。它总是在同一个块中抛出一个错误。。。我在店里做错了什么。。。。

如果我删除伪造的代码，它就可以正常工作。。。我希望显示给我的错误引用伪代码。。

这是错误：AircraftLocationStore.js:40服务器调用aircraft LocationRest失败，返回错误：aircraft Location Rest！[e-mail]:40(匿名函数)@RestServiceClient.js:20

class AircraftLocationStore extends EventEmitter {
constructor() {
super();
this._populateRestCallStatus = RestCallStatus.NOT_REQUESTED;
this._dataStore = Map({});
this.handleSuccess = this.handleSuccess.bind(this);
this.handleFailure = this.handleFailure.bind(this);
}
populate(){
RestService.fetchData(this.handleSuccess, this.handleFailure, 'aircraftLocationRest');
this._populateRestCallStatus = RestCallStatus.STARTED
}
handleSuccess(serviceName, jsonData){
UT.logMethod(TAG, `${serviceName} succeeded!`)
jsonData.forEach((entity) => {
let tempEntity = AircraftLocationHelper.createFromJson(entity);
this._dataStore = this._dataStore.merge(Map.of(tempEntity.id, tempEntity))
});
UT.log('isMap', Map.isMap(this._dataStore))
this.foo();
this._populateRestCallStatus = RestCallStatus.SUCCESS;
this.emitChange();
}
handleFailure(serviceName, error){
//Utils.logMethod(TAG, 'handleFailure');
this._populateRestCallStatus = RestCallStatus.FAILED
console.error(`Server call ${serviceName} failed with error: ${serviceName}!`)
}
...
export default new AircraftLocationStore();

如果我尝试更改onChange中显示组件上的immutablejs记录，它会告诉我。。。

以防万一，我将包括处理总是抛出错误的回调的代码

class RestServiceClient{
/**
* @param successCB
* @param failureCB
* @param endPoint
*/
fetchData(successCB, failureCB, endPoint) {
const serverUrl = BASE_URL + endPoint;
UT.log('serverUrl', serverUrl);
fetch(serverUrl).then(r => r.json())
.then(data => successCB(endPoint, data))
.catch(e => failureCB(endPoint, e.toString()))
}
}
export default new RestServiceClient();

这是我的webpack.config

var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: "source-map",
entry: "./src/index.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [{
test: /.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
}]
}
};

Answer 1

问题似乎出现在我的匿名函数中，该函数是由胖箭头=>创建的

我重写了：

fetch(serverUrl).then(r => r.json())
.then(data => let foo = data; successCB(endPoint, data))
.catch(e => failureCB(endPoint, e.toString()));

作为：

fetch(serverUrl)
.then(
function(response) {
if (response.status !== 200) {
failureCB(endPoint, 'Looks like there was a problem. Status Code: ' + response.status);
}
// Examine the text in the response
response.json().then(function(data) {
successCB(endPoint, data)
});
}
)
.catch(function(err) {
failureCB(endPoint, 'Looks like there was a problem. Status Code: ' + err);
}); 

我又一次收到了一些有意义的错误信息。。。