Javascript 将嵌套的JSON字段分配给数组

我目前正在努力提高我使用JavasScript、React和MaterialUI的技能。我试图使用嵌套的JSON对我的表进行排序，但我一直坚持将JSON字段分配给数组。是否有任何方法可以访问JSON并将其分配给数组中的id

以下是我的JSON副本：

    {
  "data": {
    "transactions": [
      {
        "referenceNumber": "912349949908",
        "transaction": "Reload",
        "details": {
          "sourceAccntNickname": "1jkp",
          "sourceAcountNumber": "6*****48",
          "transactionDate": "Feb 08, 2018",
          "billerName": "Bill1",
          "billerAccntNumber": "6***98",
          "recurring": false,
          "amount": 100000
        },
        "status": "failed"
      },
      {
        "referenceNumber": "01237659123",
        "transaction": "Reload",
        "details": {
          "sourceAccntNickname": "4jkp",
          "sourceAcountNumber": "7*****48",
          "transactionDate": "Feb 11, 2018",
          "billerName": "Bill4",
          "billerAccntNumber": "6***98",
          "recurring": true,
          "frequency": "Monthly",
          "amount": 400000
        },
        "status": "success"
      },

      {
        "referenceNumber": "012836591828",
        "transaction": "Reload",
        "details": {
          "sourceAccntNickname": "3jkp",
          "sourceAcountNumber": "7*****48",
          "transactionDate": "Feb 10, 2018",
          "billerName": "Bill3",
          "billerAccntNumber": "6***98",
          "recurring": true,
          "frequency": "Monthly",
          "amount": 300000
        },
        "status": "pending"
      },

      {
        "referenceNumber": "69880129365123",
        "transaction": "Reload",
        "details": {
          "sourceAccntNickname": "2jkp",
          "sourceAcountNumber": "7*****48",
          "transactionDate": "Feb 09, 2018",
          "billerName": "Bill2",
          "billerAccntNumber": "6***98",
          "recurring": true,
          "frequency": "Monthly",
          "amount": 200000
        },
        "status": "failed"
      }
    ]
  }
}

以下是需要排序的我的表头数组的源代码：

    function descendingComparator(a, b, orderBy) {
  if (b[orderBy] < a[orderBy]) {
    return -1;
  }
  if (b[orderBy] > a[orderBy]) {
    return 1;
  }
  return 0;
}

function getComparator(order, orderBy) {
  return order === 'desc'
    ? (a, b) => descendingComparator(a, b, orderBy)
    : (a, b) => -descendingComparator(a, b, orderBy);
}

function stableSort(array, comparator) {
  const stabilizedThis = array.map((el, index) => [el, index]);
  stabilizedThis.sort((a, b) => {
    const order = comparator(a[0], b[0]);
    if (order !== 0) return order;
    return a[1] - b[1];
  });
  return stabilizedThis.map((el) => el[0]);
}

/*  const date = SchedData.data.transactions.map(
  (data) => data.details.transactionDate
); 
console.log('Dates:', date, typeof date); */

const headCells = [
  {
    id: 'transactionDate',
    numeric: false,
    disablePadding: true,
    label: 'PAYMENT DATE',
  },
  { id: 'recurring', numeric: false, disablePadding: false, label: 'SCHEDULE' },
  { id: 'frequency', numeric: false, disablePadding: false, label: 'BILLER' },
  {
    id: 'sourceAccntNickname',
    numeric: false,
    disablePadding: false,
    label: 'SOURCE',
  },
  { id: 'amount', numeric: true, disablePadding: false, label: 'AMOUNT' },
  { id: 'status', numeric: false, disablePadding: false, label: 'STATUS' },
];

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.action.hover,
  },
  body: {
    fontSize: 14,
  },
}))(TableCell);
function EnhancedTableHead(props) {
  const {
    classes,
    onSelectAllClick,
    order,
    orderBy,
    numSelected,
    rowCount,
    onRequestSort,
  } = props;
  const createSortHandler = (property) => (event) => {
    onRequestSort(event, property);
  };

  return (
    <TableHead>
      <TableRow>
        {headCells.map((headCell) => (
          <StyledTableCell
            key={headCell.id}
            sortDirection={orderBy === headCell.id ? order : false}
          >
            <TableSortLabel
              active={orderBy === headCell.id}
              direction={orderBy === headCell.id ? order : 'asc'}
              onClick={createSortHandler(headCell.id)}
            >
              {headCell.label}
              {orderBy === headCell.id ? (
                <span className={classes.visuallyHidden}>
                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
                </span>
              ) : null}
            </TableSortLabel>
          </StyledTableCell>
        ))}
      </TableRow>
    </TableHead>
  );
}

函数下降比较器（a、b、orderBy）{
if（b[orderBy]a[orderBy]）{
返回1；
}
返回0；
}
函数getComparator（order，orderBy）{
退货订单==='desc'
？（a，b）=>下降比较器（a，b，orderBy）
：（a，b）=>-下降比较器（a，b，orderBy）；
}
函数stableSort（数组、比较器）{
const stabilizedThis=array.map（（el，index）=>[el，index]）；
稳定此排序（（a，b）=>{
常数阶=比较器（a[0]，b[0]）；
如果（订单！==0）退货订单；
返回a[1]-b[1]；
});
返回稳定该映射（（el）=>el[0]）；
}
/*const date=SchedData.data.transactions.map(
（数据）=>data.details.transactionDate
); 
console.log（'Dates:'，date，typeof date）*/
常数头细胞=[
{
id:“transactionDate”，
数字：false，
disablePadding:对，
标签：“付款日期”，
},
{id:'recurtive'，numeric:false，disablePadding:false，label:'SCHEDULE'}，
{id:'frequency'，numeric:false，disablePadding:false，label:'BILLER'}，
{
id:'源帐户昵称'，
数字：false，
禁用填充：false，
标签：“源”，
},
{id:'amount'，numeric:true，disablePadding:false，label:'amount'}，
{id:'status'，numeric:false，disablePadding:false，label:'status'}，
];
const StyledTableCell=带有样式（（主题）=>({
负责人：{
背景色：theme.palete.action.hover，
},
正文：{
尺寸：14，
},
}))（表细胞）；
功能增强型龙头（道具）{
常数{
班级，
选择单击，
命令，
订购人，
numSelected，
行数，
按请求排序，
}=道具；
const createSortHandler=（属性）=>（事件）=>{
onRequestSort（事件、属性）；
};
返回(
{headCells.map（（headCell）=>(
{headCell.label}
{orderBy===headCell.id(
{order=='desc'？'sorted descending'：'sorted suscending'}
)：null}
))}
);
}

以下是我的输出的照片：

分配一个不像状态字段那样嵌套的字段是有效的，但是如果它在嵌套中，我该怎么办？ 我想尽了一切办法，但我想我现在需要你们的帮助。任何帮助、提示、建议等都将不胜感激。谢谢大家!

编辑（8/16/20）：嗨！这里是我作品的沙盒副本链接：

---

您可能需要考虑的一种解决方案是首先平移数据，删除嵌套。

可以使用在呈现表之前准备数据。检查下面的代码

export default function Scheduled（）{
const classes=useStyles（）；
const[order，setOrder]=React.useState（“asc”）；
const[orderBy，setOrderBy]=React.useState（“”）；
//将保存展开数据的状态
const[schedData，setSchedData]=React.useState（[]）；
React.useffect（（）=>{
const{transactions}=SchedData.data；
const schedData=transactions.map（（事务）=>{
//使所有“详细信息”属性都可访问
//与“地位”处于同一级别`
返回{…transaction，…transaction.details}；
});
设置切达（schedData）；
}, []);
常量handleRequestSort=（事件、属性）=>{
const isAsc=orderBy==property&&order==“asc”；
setOrder（isAsc？“描述”：“asc”）；
setOrderBy（属性）；
};
返回(
{stableSort（schedData，getComparator（order，orderBy））.map(
（数据、索引）=>{
返回(
{/*注意这里，我们不必使用'data.details`*/}
{data.transactionDate}
{data.frequency}
{data.bilerName}
{data.sourceAccntNickname}
{data.amount}
{data.status}
);
}
)}
);
}

分叉和更新的代码沙盒：

---

你能为此提供一个代码沙盒吗？嗨@bertdida！很抱歉回复太晚，这里是我工作的代码沙盒链接。谢谢你的帮助！：）