javascript - TypeError：无法读取未定义 [ReactJS 和多维数组] 的属性“1”

Question

我正在使用 ReduxToolkit 创建一个 MultiStep 表单来管理状态。tableArrayData在表单的第三步，访问行中的数组时出现错误“无法读取未定义的属性 '1'”

<BootstrapInput
                type="number"
                name={getUniqueKeyFromArrayIndex(i, j)}
                onChange={onChangeHandler}
                value={tableArrayData[i][j]}
              />

这是我在CodeSandbox上的代码的链接，下面是在表单的第 3 步生成表格的函数。

    const createTable = () => {
    compileAnswers();
    let table = [];
    let arrCount = 0;
    // initializeAlgoMatrix();
    // Outer loop to create parent
    for (let i = 0; i < answers.length + 1; i++) {
      let children = [];
      //Inner loop to create children
      for (let j = 0; j < noOfRecommendation + 1; j++) {
        if (i === 0 && j === 0) {
          children.push(
            <td
              style={{
                width: "100px",
                paddingLeft: "20px",
                paddingRight: "50px"
              }}
            >
              {/* Row Header */}
            </td>
          );
          continue;
        }
        if (j === 0) {
          children.push(
            <td
              style={{
                width: "100px",
                paddingLeft: "20px",
                paddingRight: "50px"
              }}
            >
              {answers[arrCount]}
            </td>
          );
          ++arrCount;
          continue;
        }
        if (i === 0) {
          children.push(
            <td
              style={{
                width: "100px",
                paddingLeft: "20px",
                paddingRight: "50px"
              }}
            >
              {"Recommen." + j}
            </td>
          );
        } else {
          children.push(
            <td>
              <BootstrapInput
                type="number"
                name={getUniqueKeyFromArrayIndex(i, j)}
                onChange={onChangeHandler}
                value={tableArrayData[i][j]}
              />
            </td>
          );
        }
      }
      if (i === 0) {
        table.push(<TableHead key={i}>{children}</TableHead>);
      } else {
        table.push(
          <TableRow key={i}>
            <TableCell>{children}</TableCell>
          </TableRow>
        );
      }
      // console.log(tableCellsData);
      console.log(tableArrayData);
    }
    return table;
  };

我检查了许多解决方案，但似乎没有解决问题。知道如何解决这个问题吗？

标签： javascriptreactjsreact-reduxredux-toolkit