React中遍历对象数组渲染键值，分组数据可打印但HTML表格空白怎么解决

问题原因排查 #

• 核心原因：你写的多层map遍历函数全部没有显式返回JSX元素，所有生成的<TableRow>都没有被收集到tableData数组中，最终渲染自然为空
• 次要优化点：
  • 分组逻辑冗余，重复按相同字段deliveryDate分组，完全可以简化
  • 列表渲染的JSX元素缺失key属性，会触发React的警告
  • 表单元素id重复，会导致label关联异常

修正方案 #

首先简化分组逻辑：

// 原冗余分组可直接简化，finalGroup本身就是以deliveryDate为键的分组对象
const finalGroup = sortedOrderItems ? _.groupBy(sortedOrderItems, "deliveryDate") : {};

再修改渲染逻辑，补全返回语句、添加key属性、修正重复id：

const tableData = Object.keys(finalGroup).map((dateKey, groupIndex) => {
  // 同时返回分组表头行 + 该分组下的所有数据行
  return [
    // 日期分组表头
    <TableRow 
      key={`header-${groupIndex}`}
      style={{backgroundColor:'#E6E6FA', textAlign:'center'}}
    >
      <TableCell colSpan={9} style={{backgroundColor:'#E6E6FA'}}>{dateKey}</TableCell>
    </TableRow>,
    // 分组下的所有商品行
    ...finalGroup[dateKey].map((object, itemIndex) => {  
      return (
        <TableRow 
          key={`row-${groupIndex}-${itemIndex}`}
          style={{backgroundColor:'#FAFAFA', textAlign:'center'}}
        >
          <TableCell style={{fontSize:'17px'}}> 
            <img 
              src={object.product.productImage} 
              style={{border:'1px solid #DEDBDB',height:'50px',marginTop:'1px', marginLeft:'2px', width:'50px'}} 
              alt={object.name} 
            />
          </TableCell>
          <TableCell >
            <div style={{ wordWrap:'break-all'}}>
              {MOMENT(object.deliveryDate).tz(timeZone).format('YYYY-MM-DD, h:mm A')}
            </div>
          </TableCell>
          <TableCell >
            <div style={{width:'200px', wordWrap:'break-all'}}>{object.name}</div>
          </TableCell>
          <TableCell>
            <span style={{marginLeft:'-40px'}}>{object.unitName}</span>
          </TableCell>
          <TableCell>
            <span style={
              object.status == 'BACK_ORDER' ||  object.status == 'UNAVAILABLE' || object.status == 'OUT_OF_STOCK' 
                ? {color:'red',marginLeft:'-35px'} 
                : {color:'green', marginLeft:'-35px'} 
            }>
              {object.status}
            </span>
          </TableCell>
          <TableCell>
            <span style={{textAlign:'center'}}>
              {regionID == 1050 ? <span>&#36;</span> : regionID == 1000 ? <span>&#x20b9;</span>: ''}
              {object.unitPrice}
            </span>
          </TableCell>
          <TableCell>
            <span style={{textAlign:'center'}}>
              {regionID == 1050 ? <span>&#36;</span> : regionID == 1000 ? <span>&#x20b9;</span>: ''}
              {object.totalPrice}
            </span>
          </TableCell>
          <TableCell>
            <span style={{}}>{object.quantity}</span>
          </TableCell>                                                        
          <TableCell>
            <div style={{float:'right', marginLeft:'-65px'}}>
              <FormControl variant="outlined" style={{width:'202px', float:'right'}}>
                <InputLabel id={`status-label-${groupIndex}-${itemIndex}`}>Update Item Status</InputLabel>
                <Select
                  style={{height:'44px',textAlign:'center', margin:'7px'}}
                  native
                  id={`status-${groupIndex}-${itemIndex}`}
                  value={OrderItemStatus.status}
                  onChange={(event)=>{handleStatusChange(event, object.id)}}
                  label="Update Order Status"
                >
                  <option aria-label="None" value="" />
                  {statuses.map((stat, statIdx)=>{
                    return(<option id={statIdx} key={statIdx} value={stat}>{stat}</option>)
                  })}
                </Select>
              </FormControl>
            </div>
          </TableCell>
        </TableRow>
      )
    })
  ]
})

如果你一定要保留原来的result变量结构，只需要给每一层map都加上显式return，并且展开嵌套数组即可，核心逻辑就是保证所有生成的JSX元素都被正确返回到最终的渲染数组中。

内容的提问来源于stack exchange，提问作者MrStack