React开发遇Uncaught TypeError：无法读取undefined的x属性求助

你的报错原因是内层for循环的计数器更新写错了：内层循环里误用了i++而非g++，导致外层循环的i被无限制递增，很快超出limits数组的长度，此时limits[i]变为undefined。当把undefined传入calculateIntersectionX函数后，访问p3.x或p4.x自然就会抛出"Cannot read properties of undefined (reading 'x')"的错误。

错误代码位置 #

内层循环的增量部分写错了：

for (var g = 0; g < limits.length; i++) {

修正后的代码 #

const limits = [
  { x: 12.3456777, y: -12.3456777 },
  { x: 12.3456777, y: -12.3456777 },
  { x: 12.3456777, y: -12.3456777 },
];
for (var i = 0; i < limits.length; i++) {
  // 将内层循环的i++改为g++
  for (var g = 0; g < limits.length; g++) {
    if (limits[i] != limits[g]) {
      let a1 = limits[i];
      let a2 = limits[g];
      calculateIntersectionX(avgfakex1, avgfakex2, a1, a2);
      calculateIntersectionY(avgfakey1, avgfakey2, a1, a2);
    }
  }
}


function calculateIntersectionX(p1, p2, p3, p4) {
  var c2x = p3.x - p4.x; // (x3 - x4)
  var c3x = p1.x - p2.x; // (x1 - x2)
  var c2y = p3.y - p4.y; // (y3 - y4)
  var c3y = p1.y - p2.y; // (y1 - y2)
  // 剩余逻辑代码...
}

额外优化建议 #

你用var声明循环计数器i和g，会存在变量提升导致的作用域污染问题，建议换成let声明，限制变量的作用域范围：

for (let i = 0; i < limits.length; i++) {
  for (let g = 0; g < limits.length; g++) {
    // ...循环逻辑
  }
}

内容的提问来源于stack exchange，提问作者VALHIR