は、ReactJS多次元グリッドで-1のプロパティを読み取ることができません。

Question

私はこの問題に悩まされています。私はコンウェイの人生のゲームを構築しています。そして、今、私は隣人（標的細胞の上部、下部、および側面にある細胞）を見つけようとしています。私がコンソールにログを記録すると（基本的には隣人を探すために）、私は下部と中央の行とすべての列の値を取得しますが、一番上の行は"未定義のプロパティ '-1'を読み取れません"。ときどきそれはを返します "定義された 'r'のプロパティを読み取ることができません同様。私はコンソールのログ（r）とカラム（c）の両方をログに記録するときに戻り値を取得するので、私は混乱しています。私はまた、なぜ私は私の列を扱うときに、この同じエラーメッセージが表示されないように興味があります。開発者ツールのメッセージは非常にわかりにくいです。私はこれを理解しようとかなりの時間を費やしましたが、私は本当に立ち往生しています。どんな助けでも大歓迎です。 私はJSbinsをやろうとしました：しかし、私の反応成分の構築が好きではありません。私のコードには、これらの領域が明確に表示されます：http://codepen.io/tbraden30/pen/AXgVNQ。ただ、それは1つのエラーにより、オフのように聞こえるプレイボタンとdevのツールをあなたの助け

function randomGrid() { 
    var gridHeight = 20, 
    gridWidth = 20, 
    gridContainer = []; 
    for (var r = 0; r < gridWidth; r++) { 
    var row = []; 
    for (var c = 0; c < gridHeight; c++) { 
     row.push({ 
     alive: Math.random() < 0.2, 
     neighbors: 0, 
     r: r, 
     c: c, 
     coords: [r, c] 
     }); 
    } 
    gridContainer.push(row) 
    } 
    return gridContainer; 
} 

function isWithinBounds(cell) { 
    if (cell.r >= 0 && cell.r < 20 && cell.c >= 0 && cell.c < 20) { 
    return true 
    } 
} 

var grid = randomGrid(); 

var Board = React.createClass({ 
    getInitialState: function() { 
    return { 
     cellLocation: randomGrid() 
    }; 
    }, 

    updateCells: function(r, c) { 
    var grid = this.state.cellLocation; 
    for (var r = 0; r < 20; r++) { 
     for (var c = 0; c < 20; c++) { 
     var cell = grid[r][c]; 
     //console.log('cell', cell) 
     cell.neighbors = 0; 
     var isAlive = cell.alive; 
     var bottomLeft = grid[r + 1][c - 1], 
      bottomMiddle = grid[r + 1][c], 
      bottomRight = grid[r + 1][c + 1], 
      middleLeft = grid[r][c - 1], 
      middleRight = grid[r][c + 1], 
      topLeft = grid[r - 1][c - 1], **//problematic** 
      topMiddle = grid[r - 1][c], **//problematic** 
      topRight = grid[r - 1][c + 1];**//problematic** 
     /* if (isWithinBounds(bottomLeft) && isAlive) { 
      cell.neighbors++; 
      } 
      if (isWithinBounds(bottomMiddle) && isAlive) { 
      cell.neighbors++; 
      } 
      if (isWithinBounds(bottomRight) && isAlive) { 
      cell.neighbors++; 
      } 
      if (isWithinBounds(middleLeft) && isAlive) { 
      cell.neighbors++; 
      } 
      if (isWithinBounds(middleRight) && isAlive) { 
      cell.neighbors++; 
      } 
      if (isWithinBounds(topLeft) && isAlive) { 
      cell.neighbors++; 
      } 
      if (isWithinBounds(topMiddle) && isAlive) { 
      cell.neighbors++; 
      } 
      if (isWithinBounds(topRight) && isAlive) { 
      cell.neighbors++; 
      }*/ 
     console.log('TR', topRight) 
     } 
    } 
    return cell; 
    }, 

    render: function() { 
    return (
     <div className='container grid_body'> 
     <CellMatrix grid={this.state.cellLocation}/> 
     <button type='button' onClick={this.updateCells} className='play'>Play</button> 
    </div> 
    ) 
    } 
}, this) 

var CellMatrix = React.createClass({ //cells conglomerated into a grid 
    render: function() { 
    var fillCells = [], 
     grid = this.props.grid, 
     grid = grid.reduce((a, b) => a.concat(b)) //flattens the array. 
    grid.map(function(cellObject, index) { 
     fillCells.push(<Cell alive={cellObject.alive} r={cellObject.r} c={cellObject.c} coords={cellObject.coords} index={index} neighbors={this.updateCells}/>) 
     // console.log('fillcells', fillCells) 
    }, this) 
    return (
     <div>  
    {fillCells} 
    </div> 
    ) 
    } 
}) 

var Cell = React.createClass({ //individual cell 
    render: function() { 
    return (
     <td className={this.props.alive} 
     index={this.props.index} 
     coords={this.props.coords} 
     r={this.props.r} 
     c={this.props.neighbors} 
     neighbors={this.props.neighbors} 
     > 
     {this.props.children} 
     </td> 
    ) 
    } 
}) 

ReactDOM.render(<Board/>, document.getElementById('content')) 

Answer 1

を事前に 感謝をクリックします。グリッドを生成するとき、インデックス0..19から移動しますが、updateCells関数では、c = 0というループを1つ引いて、rと/またはcが0のときgrid[-1][-1]にアクセスしようとしていますあなたがしようとしているものではない）。致命的なエラーは、rが19でcが0のときに発生し、rに1を加えてcから1を引いたものになります。あなたはgrid[20][-1]にアクセスし、grid[20]は定義されていないため、エラーが発生します。Cannot read property '-1' of undefined