javascript - 尝试将数组中对象的键显示到表中

Question

这感觉像是一个 super 简单的问题，我以为我知道解决方案，但只是无法弄清楚为什么它不起作用。

我正在尝试在表中显示 Firestore 中的记录。有些字段可以很好地进入表中，但其中一个字段是由对象数组给我带来了问题，该对象包含 childName、childAge 和 childId。我正在尝试显示 childName。

我只想显示第一个 Children 对象的子名称。

但我不断收到错误:

"TypeError: Cannot read property '0' of undefined"

<TableBody>
        {forms.map(row => (
          <TableRow key={row.id}>

             //the TableCell below where I am trying to display childName
            <TableCell component={"th"} scope={"row"}>
              {row.children[0].childName}
            </TableCell>

            <TableCell>{row.timeIn}</TableCell>
            <TableCell>{row.timeOut}</TableCell>
            <TableCell>{row.parentName}</TableCell>
            <TableCell>{row.shoeBoxNumber}</TableCell>
          </TableRow>
        ))}
      </TableBody>

以下是完整的错误屏幕截图:

下面是我的状态，我正在使用 React hooks:

Answer 1

尝试添加验证:如果数组不为空:{row.children && row.children.length && row.children[0].childName}

<TableBody>
        {forms.map(row => (
          <TableRow key={row.id}>

             //the TableCell below where I am trying to display childName
            <TableCell component={"th"} scope={"row"}>
              {row.children && row.children.length && row.children[0].childName}
            </TableCell>

            <TableCell>{row.timeIn}</TableCell>
            <TableCell>{row.timeOut}</TableCell>
            <TableCell>{row.parentName}</TableCell>
            <TableCell>{row.shoeBoxNumber}</TableCell>
          </TableRow>
        ))}
      </TableBody>