无法读取ReactJS多维网格中-1的属性

Question

我对这个问题束手无策。我正在构建康威的生命游戏，现在我正在努力寻找邻居（位于目标细胞顶部、底部和侧面的细胞）。当我控制台记录我的函数（基本上是为了查找邻居）时，我会得到底部和中间行以及所有列的值，但对于顶部行，我会获得"无法读取未定义的属性'-1'"。有时它会返回"无法读取已定义"的'r'属性。我很困惑，因为当我控制台记录行（r）和列（c）时，我会得到返回值。我也很好奇为什么在处理我的专栏时没有看到同样的错误消息。开发人员工具上的消息非常神秘。我花了很多时间试图弄清楚这一点，但我真的陷入了困境。任何帮助都将不胜感激。我试着做了一个JSbins：https://jsbin.com/bapazem/edit?html，css，js，output，但它不喜欢我的react组件的构造。你可以在我的代码笔上清楚地看到这些区域：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

这听起来像是一个off-by-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