p5.js 网格渲染报错：Cannot convert undefined or null to object 求助

嘿，我来帮你捋捋这个报错的问题！这个Cannot convert undefined or null to object的错误，说白了就是你在遍历网格或者操作网格元素的时候，不小心把undefined或者null当成对象来用了，咱们一步步排查：

• 先查网格数组的初始化环节：你说应该有16个单元格，但说不定初始化时哪里漏了？比如做4x4网格的嵌套循环时，是不是忘了先初始化每一行的数组？比如得先写grid[i] = [];，再往里面塞单元格对象，不然直接给grid[i][j]赋值的话，grid[i]本身是undefined，最后数组里就会有大量空值。另外也得看看循环次数对不对，比如是不是把i < 4写成了i <=4，导致多跑了一次循环，出现了超出数组范围的索引。

• 再检查遍历的代码：你用for循环遍历的时候，是不是用了Object.keys()这类对象方法来遍历数组？如果数组里有null或者undefined，用这些方法就会触发这个错误。或者循环里访问单元格属性时，比如cell.width，但这个cell其实是undefined（比如索引越界了），那也会触发类似问题。

• 还有个小细节：你是不是在p5.js的draw()函数里提前访问网格了？不过一般setup()会先执行，但如果你的网格初始化逻辑有延迟（比如不小心写了异步代码），那也可能导致第一次draw()时网格还没初始化好。

给你贴个正确的4x4网格初始化+遍历的示例代码，你可以对照着自己的代码找差异：

let grid;
const cols = 4;
const rows = 4;

function setup() {
  createCanvas(400, 400);
  grid = [];
  // 先初始化每一行的数组，再填单元格
  for (let i = 0; i < cols; i++) {
    grid[i] = [];
    for (let j = 0; j < rows; j++) {
      grid[i][j] = { x: i * 100, y: j * 100, size: 100 };
    }
  }
}

function draw() {
  background(220);
  // 遍历网格绘制单元格
  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      let cell = grid[i][j];
      rect(cell.x, cell.y, cell.size, cell.size);
    }
  }
}

要是还是找不到问题，你可以把自己的初始化和遍历代码贴出来，我再帮你细瞅！

备注：内容来源于stack exchange，提问作者CoderGuy