反應本地chrome調試器中斷應用程序

Question

我有一個本機示例，可以在模擬器中正常工作。 但是，當我嘗試在chrome中調試它時，它將停止工作。

我正在使用導航器，第一頁是一個問候，效果很好。 當我啟用調試時，行為是這樣的：轉到第一頁，一切都很好。 單擊輸入按鈕進入應用程序，我可以在chrome中查看來自我的渲染功能的消息，但是沒有視覺上的變化。再次單擊同一按鈕，出現錯誤：

警告：flattenChildren（...）：遇到兩個具有相同鍵.0:$0孩子。 子密鑰必須唯一。 當兩個孩子共享一個密鑰時，將僅使用第一個孩子。

最后

使用參數（19，446）調用目標RCTUIManager上的replaceExistingNonRootView時引發了異常“ shadowView（針對ID 19）”

可能導致錯誤的組件如下（它是國際象棋棋盤）

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;

Answer 1

顯然，所有使用let RN代碼在Chrome調試器中都會完全中斷。 沒有解決辦法。 我們被搞砸了。 我相信RN所使用的編譯器會在閉包中包裝甚至包含一個let每個塊，突然間， this就像_this2類的_this2 ，但是Chrome調試器並不知道。