reactjs - Reactjs 表可扩展行

Question

我正在尝试通过此链接使表格行可扩展

https://gist.github.com/markerikson/bd9f03e0808558c5951e02f1aa98c563

它工作得很好，但是当我尝试从 API 动态获取数据时，有一些延迟使数据无法在行点击时呈现。

目前，如果来自 API dataEntity 的这个数组 dataEntity 的循环将无法将数据推送到 itemRows 而如果我用静态数据 [0,1,2] 替换 dataEntity 将按预期呈现我如何延迟等待加载数据第一。

  renderItem(item) {
const { classes } = this.props;
const clickCallback = () => { this.handleRowClick(item.Day); };
const itemRows = [
  <TableRow key={"row-data-" + item.Day}>
    <TableCell
      align="left"
      className={classes.TrowD}
      style={{ fontSize: 11 }}
    >
      {`${new Date(item.Day).getDate()}-${new Date(item.Day).getMonth() + 1}-${new Date(item.Day).getFullYear()}`}
      {this.state.groupByTitle ?
        <Add
          className={classes.iconAdd}
          onClick={clickCallback}
        />
        : null}
    </TableCell>
    <TableCell align="left" className={classes.TrowD}></TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.Hosts}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.Clicks}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.TrafficBack}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.Impressions}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.ApprovedQTy}</TableCell>

    <TableCell align="left" className={classes.TrowD}>{item.ApprovedRevenue}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.HoldQTy}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.HoldRevenue}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.PendingdQTy}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.PendingRevenue}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.DeclinedQTy}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.DeclinedRevenue}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.CR}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.EPC}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.ECPM}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.QTY}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.NULL}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.Revenue}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.Payouts}</TableCell>
    <TableCell align="left" className={classes.TrowD}>{item.Earnings}</TableCell>
  </TableRow>
];

if (this.state.expandedRows.includes(item.Day)) {

  let groupBy = this.state.groupByTitle == 'Affiliate' ? 'CompanyName' : 'Title';


  const datafun = function (data) {
 
    let dataEntity=data? Object.entries(data) : null
 
    {
      dataEntity.map((i) => {

        itemRows.push(
          <>

            <TableRow key={"row-expanded-" + item.id}>
             
              <TableCell align="left" className={classes.TrowD}>{item.id}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.points'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}> {'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}> {'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
              <TableCell align="left" className={classes.TrowD}>{'item.percent'}</TableCell>
            </TableRow>
          </>
        );
      })
    }
    return itemRows
  }
  datafun();
  getOffersStatisticsDetails(item.Day, item.Day, '8', '', '', '', '', '', '', '').then((res) => {
    let data;
    if (res.status == 200) {
      data = this.groupBy(groupBy, res.data.data);
    }
    return data
  }).then(datafun)
}

return itemRows;

}

标签： reactjsmaterial-ui