Reactjs react native chrome调试器会中断应用程序

我有一个react本地示例，在模拟器中运行良好。但当我尝试在chrome中调试它时，它停止工作

我使用的是Navigator，第一页是问候语，效果很好。 启用调试时，行为如下所示： 翻到第一页，一切都很好。 单击enter按钮进入应用程序，我可以在chrome中看到我的渲染功能中的消息，但没有视觉变化 再次单击同一按钮，给出错误： 许多

警告：FlattChildren（…）：遇到两个具有相同 键，

.0:$0

。子密钥必须是唯一的；当两个孩子共用一个 键，仅使用第一个子项

最后呢

调用时引发异常“未找到shadowView（用于ID 19）” 使用参数替换目标RCTUIManager上的ExistingNonRootView( 19, （446）

可能导致错误的组件如下（它是一个棋盘）

var-Dimensions=require（'Dimensions'）；
var fen=require（'../logic/fen'）；
var windowSize=Dimensions.get（'window'）；
进口反应{
评估学，
组成部分，
触控高光，
样式表，
文本，
看法
}从“反应本机”；
常数平方=要求（'./平方'）；
常数件=需要（'./件.组件'）；
常数=要求（'./常数'）；
var平方=[]；
var片段=[]；
var createRow=函数（i，宽度）{
for（设j=0；j<8；j++）{
推(
);
}
}
var createBoard=函数（宽度）{
for（设i=0；i<8；i++）{
createRow（i，宽度）；
}
};
const Board=React.createClass({
组件willmount（）{
this.pieceWidth=this.props.width/8；
createBoard（此.pieceWidth）；
这个.createPieces（）；
},
createPieces（）{
console.log（“创建片段”）；
让pieceDefinitions=fen.read（fen.initial）；
件数=[]；
var-key=0；
for（设p为分段定义）{
键=键+1；
console.log（'件键为'+键）
推(
)
}
返回件；
},
选择的平方（行、列）{
log（“行”，行，“列”，列，“选中”）；
},
getInitialState（）{
返回{selectedPiece:null}
},
render（）{
返回(
{squares}
{件}
)
}
});
const styles=StyleSheet.create({
容器：{
玛金托普：20，
背景颜色：“#F5FCFF”，
flexDirection:'行'，
flexWrap:“wrap”，
}
})
module.exports=电路板；

显然，任何使用

let

的RN代码都会在Chrome调试器中完全中断。没有解决办法。我们完蛋了。我相信RN使用的transpiler将每个包含单个

let

的块包装在一个闭包中，突然

这个
变成了另一个类似
\u this2
，但Chrome debugger不知道这一点。
你能分享你试图渲染的组件的代码吗？@FelipeMartim我添加了我的组件源代码
var Dimensions = require('Dimensions');
var fen = require('../logic/fen');
var windowSize = Dimensions.get('window');


import React, {
    AppRegistry,
    Component,
    TouchableHighlight,
    StyleSheet,
    Text,
    View
} from 'react-native';

const Square = require('./square');
const Piece = require('./piece.component');
const CONSTANTS = require('./constants');
var squares = [];
var pieces = [];
var createRow = function(i, width) {
    for (let j = 0; j < 8; j++) {
        squares.push(<Square width={width} key={i*10+j} row = {i} column = {j} onSquareSelected = {this.squareSelected}></Square>
        );
    }
}
var createBoard = function(width) {
    for (let i = 0; i < 8; i++) {
        createRow(i, width);
    }
};

const Board = React.createClass({

    componentWillMount() {
       this.pieceWidth = this.props.width/8;
       createBoard(this.pieceWidth);
       this.createPieces();

    },
    createPieces(){
        console.log('Creating pieces');
        let pieceDefinitions =  fen.read(fen.initial);
        pieces = [];
        var key = 0;
        for(let p in pieceDefinitions){

            key = key +1 ;
            console.log('piece key is ' + key)
             pieces.push(
                    <Piece key={key} width ={this.pieceWidth} coordinate={p} color = {pieceDefinitions[p].color} 
                    role = {pieceDefinitions[p].role}>
                 </Piece>
             )
        }
        return pieces;
    },
    squareSelected(row, column) {
        console.log("Row", row, "Column", column, "selected");
    },
    getInitialState() {
        return { selectedPiece: null }
    },

    render() {
        return (
            <View style={[styles.container, {width : this.props.width ,height: this.props.width}]}>
                {squares}
                {pieces}
            </View>
        )
    }
});

const styles = StyleSheet.create({
    container: {
        marginTop : 20,
        backgroundColor: '#F5FCFF',
        flexDirection: 'row',
        flexWrap: 'wrap',
    }
})

module.exports = Board;