Uncaught TypeError: map is not a function In Reactjs with Firebase

Question

您好，我是 React 和 Firebase 数据库的新手。尝试使用地图打印数据时出现错误。

基本上我使用的是 firebase-database，并且我已经显示了项目所有天数的列表，包括总小时数。在每一天下，我想显示工人姓名，包括当天为单个用户工作的小时数。这是屏幕截图

这是我的 Firebase 数据

正如您在数据库中看到的，在 0 键用户下给出了详细信息，但在键 1 和 2 下没有给出

现在我在尝试访问代码中给出的 row.users.map() 时打印 user_name 时遇到错误。

<Table className="MyTable">
  <TableHead>
    <TableRow>
      <StyledTableCell>Dato</StyledTableCell>
      <StyledTableCell>User Name</StyledTableCell>
      <StyledTableCell align="right">Timer</StyledTableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    {props.data.dayWiseHours.map(row => (
      <StyledTableRow key={row.date}>
        <StyledTableCell component="th" scope="row">
          {`${row.date}\n`}
        </StyledTableCell>
        <StyledTableCell component="td" scope="row">
          {  row && row.users &&  
              row.users.map((subData, subindex) =>
                  <span key={subindex}>{subData.user_name}</span> 
              )
          }
        </StyledTableCell>
        <StyledTableCell align="right">
          {`${row.hour}\n`}
        </StyledTableCell>
      </StyledTableRow>
    ))}
  </TableBody>
</Table>

如果我在给定的代码下尝试它的工作正常

<TableBody>
    {props.data.dayWiseHours.map(row => (
      <StyledTableRow key={row.date}>
        <StyledTableCell component="th" scope="row">
          {`${row.date}\n`}
        </StyledTableCell>
        <StyledTableCell component="td" scope="row">
          { row && row.users &&  row.users['-LjuTOzAhVpku-hDFUJ7'].user_name ? row.users['-LjuTOzAhVpku-hDFUJ7'].user_name : "--" }
        </StyledTableCell>
        <StyledTableCell align="right">
          {`${row.hour}\n`}
        </StyledTableCell>
      </StyledTableRow>
    ))}
  </TableBody>

但密钥：row.users['-LjuTOzAhVpku-hDFUJ7'] 并不总是相同。

谢谢

Answer 1

看起来row.users 是Object，您只能在Array 上使用地图。要遍历 Object，您可以执行以下操作：

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

Object.keys(object1).map((key) => {
  console.log('key:', key);
  console.log('value:', object1[key]);
});

首先创建一个对象键的数组，然后映射该数组。

Answer 2

我已经通过使用@Vaibhav 示例解决了我的问题，请检查给定的代码

{ Array.isArray(props.data.dayWiseHours) ? props.data.dayWiseHours.map(row => (
      <StyledTableRow key={row.date}>
        <StyledTableCell component="th" scope="row">
          {`${row.date}\n`}
        </StyledTableCell>
        <StyledTableCell component="th" scope="row">
            { row.users? 
              (
                Object.keys(row.users).map( userKey => (
                <> <span> { row.users[userKey].user_name? row.users[userKey].user_name : "N/A" } - Working Hours : {row.users[userKey].hour} </span><br/></> 
                ))
              ) : "--"      
            }

        </StyledTableCell>
        <StyledTableCell align="right">
          {`${row.hour}\n`}
        </StyledTableCell>
      </StyledTableRow>
    )) : "" 
}

输出是：

Answer 3

如果您在访问 subData.user_name 时遇到错误，则该特定 subData 对象中可能不存在属性 user_name。 在打印用户名时也为属性添加一个空检查

subData.user_name ? subData.user_name : ""