Question

React TypeError：无法读取未定义的属性‘0’

2021-08-27

89

javascript reactjs

我正在编写一个函数来计算 12 行的各列总数，并创建一个大小相同的总值的新数组，但我一直收到错误

TypeError：无法读取未定义的属性“0” 我该如何解决它

维度 [6][12] 的 new_matrix 是预先计算的，然后传递到 colTotaler 函数中，因为矩阵输入也是通过矩阵输入形式获得的

colToataler(new_matrix);

let columns = [0,0,0,0,0,0,0,0,0,0,0,0];

const[col,setCol] = useState(columns);

const colTotaler = (new_matrix) => {
   let i = 0,
     j = 0;

   for (i = 0; i < new_matrix[0].length; i++) {
     for (j = 0; j < new_matrix.length; j++) {
       columns[i] += new_matrix[i][j];
     }
   }

   setCol(columns);
 };

Answer 1

您选择计算 colTotaler 的方式不够好。我建议您以功能性方式执行此操作，使用 map 、 reduce 和 React 的反应性：

const [matrix, setMatrix] = useState(defaultMatrix)

const colTotaler = matrix.map((column) => {
  return column.reduce((colTotal, element) => colTotal+ element, 0)
})

现在，每次调用 setMatrix 时，组件都会重新渲染，colTotaler 也会重新计算。

Answer 2

如果您从状态传递 new_matrix ，则状态的初始值可能未定义。要解决该问题，您可以添加 if 语句来检查状态是否已初始化：

let comumns = [0,0,0,0,0,0,0,0,0,0,0,0];

const[col,setCol] = useState(columns);

const colTotaler = (new_matrix) => {
   if (new_matrix) {
     let i = 0,
       j = 0;

     for (i = 0; i < new_matrix[0].length; i++) {
       for (j = 0; j < new_matrix.length; j++) {
         columns[i] += new_matrix[i][j];
       }
     }

     setCol(columns);
   }
 };