無法在ReactJS多維網格中讀取-1的屬性

Question

我在我的這個問題中發現了這個問題。我正在建立康威的生活遊戲，現在我正在努力尋找鄰居（位於目標細胞頂部，底部和側面的細胞）。當我控制檯登錄我的功能（基本上是爲了找到鄰居）時，我得到底部和中間行以及所有列的值，但是對於頂部行，我得到「無法讀取未定義的」「的屬性'-1'。有時會返回「無法讀取定義的」r「的屬性以及。我很困惑，因爲我在控制檯記錄行（r）和列（c）時得到了返回值。我也很好奇，爲什麼我在處理我的列時看不到這個相同的錯誤信息。開發人員工具上的消息非常神祕。我花了相當多的時間試圖弄清楚這一點，但我真的被卡住了。任何幫助將非常感激。 我試圖做一個JSbins：https://jsbin.com/bapazem/edit?html,css,js,output但它不喜歡我的反應組件的構建。您可以在我的codepen上清楚地看到這些區域：http://codepen.io/tbraden30/pen/AXgVNQ。只需點擊播放按鈕和開發工具 預先感謝您的幫助

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

這聽起來像是由1個錯誤關閉。當您生成網格時，您從索引0..19開始，但在updateCells函數中，您有一個設置c = 0的循環，然後從其中減去1，意味着當r和/或c爲0時嘗試訪問grid[-1][-1]（可能不是你想要做的）。那麼當r是19並且c是0時，可能會發生致命錯誤，並且您將一個添加到r並從c中減去1。你最終訪問grid[20][-1]，因爲grid[20]是未定義的，你會得到錯誤Cannot read property '-1' of undefined