在React JavaScript中显示/映射嵌套的JSON字段

这是我第一次在这里发布。我目前正在发展JavaScript、React和MaterialUI方面的技能。我试图在表中显示来自示例嵌套JSON文件的账单数据

它登录到控制台，但我不明白为什么它不显示在我的表中。请帮帮我：（

这是我的JSON文件：

[
  {
    "data": {
      "transactions": [
        {
          "referenceNumber": "2323",
          "transaction": "Reload",
          "details": {
            "sourceAccntNickname": "6jkp",
            "sourceAcountNicknae": "6*****48",
            "transactionDate": "Feb 08, 2018",
            "biller": [
              {
                "billerName": "AT&T",
                "billerAccntNumber": "6***98"
              }
            ],
            "recurring": false,
            "amount": 600000
          },
          "status": "failed"
        },
        {
          "referenceNumber": "2323",
          "transaction": "Reload",
          "details": {
            "sourceAccntNickname": "7jkp",
            "sourceAcountNicknae": "7*****48",
            "transactionDate": "Feb 09, 2018",
            "biller": [
              {
                "billerName": "AT&T",
                "billerAccntNumber": "6***98"
              }
            ],
            "recurring": true,
            "frequency": "Monthly",
            "amount": 700000
          },
          "status": "failed"
        }
      ]
    }
  }
]

以下是我的代码，用于将数据显示到我的表中：

<TableBody>
          {stableSort(SchedData, getComparator(order, orderBy)).map(
            (data, index) => {
              return (
                <TableRow tabIndex={-1} key={index}>
                  <TableCell>
                    {data.data.transactions.map((date, index) => {
                      return (
                        <Typography key={index}>
                          {date.details.transactionDate}
                        </Typography>
                      );
                    })}
                  </TableCell>
                  <TableCell>
                    {data.data.transactions.map((rec, index) => {
                      return (
                        <h1 key={index}>
                          {rec.details.recurring === false ? (
                            <Typography>Future-dated</Typography>
                          ) : (
                            <Typography>{rec.details.frequency}</Typography>
                          )}
                        </h1>
                      );
                    })}
                  </TableCell>
                  <TableCell align='right'>
                    {data.data.transactions.map((bil, index) => {
                      bil.details.biller.map((bilNameAcct, index) => {
                        console.log(
                          bilNameAcct.billerName,
                          bilNameAcct.billerAccntNumber
                        );
                        return (
                          <Typography key={index}>
                            {bilNameAcct.billerName}
                            <br />
                            {bilNameAcct.billerAccntNumber}
                          </Typography>
                        );
                      });
                    })}
                  </TableCell>
                  <TableCell align='right'></TableCell>
                  <TableCell align='right'></TableCell>
                </TableRow>
              );
            }
          )}
        </TableBody>

{stableSort（SchedData，getComparator（order，orderBy））.map(
（数据、索引）=>{
返回(
{data.data.transactions.map（（日期，索引）=>{
返回(
{date.details.transactionDate}
);
})}
{data.data.transactions.map（（rec，index）=>{
返回(
{rec.details.recurrential===false(
未来日期
) : (
{rec.details.frequency}
)}
);
})}
{data.data.transactions.map（（bil，索引）=>{
bil.details.biller.map（（bilNameAcct，index）=>{
console.log(
bilNameAcct.billerName，
bilNameAcct.billerAccntNumber
);
返回(
{bilNameAcct.billerName}


{bilNameAcct.bileraccntnumber}
);
});
})}
);
}
)}

这是我的输出和控制台的图像副本：

---

非常感谢您提供的任何帮助和提示。提前感谢您的帮助！

您忘记了从

map（）

函数返回结果

您的代码：

data.data.transactions.map((bil, index) => {
  bil.details.biller.map((bilNameAcct, index) => { 
    /* ... */ 
  })
})

工作代码：

data.data.transactions.map((bil, index) => {
  return bil.details.biller.map((bilNameAcct, index) => { 
    /* ... */ 
  })
})

完整的

：

{data.data.transactions.map（（bil，索引）=>{
返回bil.details.biller.map（（bilNameAcct，index）=>{
console.log(
bilNameAcct.billerName，
bilNameAcct.billerAccntNumber
);
返回(
{bilNameAcct.billerName}


{bilNameAcct.bileraccntnumber}
);
});
})}

您在地图功能中错过了返回

 <TableCell align='right'>
    {data.data.transactions.map((bil, index) => {
      return bil.details.biller.map((bilNameAcct, index) => { // you missed it here
        console.log(
          bilNameAcct.billerName,
          bilNameAcct.billerAccntNumber
        );
        return (
          <Typography key={index}>
            {bilNameAcct.billerName}
            <br />
            {bilNameAcct.billerAccntNumber}
          </Typography>
        );
      });
    })}
  </TableCell>

{data.data.transactions.map（（bil，索引）=>{
返回bil.details.biller.map（（bilNameAcct，index）=>{//您在这里错过了它
console.log(
bilNameAcct.billerName，
bilNameAcct.billerAccntNumber
);
返回(
{bilNameAcct.billerName}


{bilNameAcct.bileraccntnumber}
);
});
})}

 <TableCell align='right'>
    {data.data.transactions.map((bil, index) => {
      return bil.details.biller.map((bilNameAcct, index) => { // you missed it here
        console.log(
          bilNameAcct.billerName,
          bilNameAcct.billerAccntNumber
        );
        return (
          <Typography key={index}>
            {bilNameAcct.billerName}
            <br />
            {bilNameAcct.billerAccntNumber}
          </Typography>
        );
      });
    })}
  </TableCell>