React矩阵列求和报错TypeError: Cannot read property '0' of undefined如何解决

报错原因 #

• 矩阵索引顺序写反：你的new_matrix维度为[6][12]，符合new_matrix[行索引][列索引]的规则，行索引取值范围是0_{5，列索引是0}11。你代码里外层循环用i遍历列数（共12次），直接把i作为行索引传入new_matrix[i][j]，当i≥6时new_matrix[i]为undefined，访问[j]属性就会触发该报错。如果传入的new_matrix本身为undefined，访问new_matrix[0]也会触发同类报错。
• 函数名拼写可能有误：你定义的函数名为colTotaler，但问题中描述的调用方式是colToataler(new_matrix)，多写了一个字母a，如果实际代码也是该写法会导致函数未定义，也可能触发关联报错。
• 直接修改外部数组不符合React状态规范：你直接修改外部定义的columns数组再调用setCol，属于直接修改引用值，可能导致后续视图更新异常。

修复方案 #

调整索引逻辑、新增合法性校验、遵循React状态更新规则即可解决，修复后代码如下：

const initColumns = new Array(12).fill(0);
const [col, setCol] = useState(initColumns);

const colTotaler = (new_matrix) => {
  // 新增矩阵合法性判断，空值/空矩阵场景下也不会报错
  if (!new_matrix || !new_matrix.length || !new_matrix[0].length) return;
  // 函数内部新建合计数组，不直接修改外部变量，遵循不可变原则
  const totalColumns = new Array(new_matrix[0].length).fill(0);
  // 外层遍历行、内层遍历列，索引命名语义化避免混淆
  for (let row = 0; row < new_matrix.length; row++) {
    for (let colIndex = 0; colIndex < new_matrix[0].length; colIndex++) {
      totalColumns[colIndex] += new_matrix[row][colIndex];
    }
  }
  setCol(totalColumns);
};

// 调用时注意检查函数名拼写正确
// colTotaler(new_matrix)

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