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

Question

这是我第一次在这里发帖。我目前正在发展 JavaScript、React 和 Material-UI 方面的技能。我正在尝试在表格中显示示例嵌套 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>

这是我的输出和控制台的图像副本: OUTPUT/CONSOLE

任何帮助和提示将非常感激。预先感谢您对我的帮助!

Answer 1

您忘记返回 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) => { 
    /* ... */ 
  })
})

完整<TableCell /> :

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