TypeScript(TSX)中使用双层Map无法返回HTML的问题求助

嘿，我马上就发现你的问题所在啦！这跟TypeScript特性没啥关系，纯粹是函数返回值的小疏忽导致的~

核心问题：外层map没返回内层的JSX结果 #

你写的外层map函数里，只是执行了内层的map操作，但没有把内层生成的JSX元素集合返回出去。JS/TS里，如果函数用大括号包裹代码块，默认会返回undefined，React拿到一堆undefined自然渲染不出东西，但内层map本身是能生成正确元素的，所以控制台打印能看到结果。

修正后的代码 #

只需要在外层map里加上return，或者用箭头函数的隐式返回（去掉大括号）就行：

{newArray?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)?.map((arr: any) => { 
  // 加上return，把内层map的结果返回给外层
  return arr 
    .filter((element) => element !== undefined) 
    .map((row: any) => { 
      return ( 
        <TableRow role="checkbox" key={row.id} className={classes.row} > 
          {row.id} 
        </TableRow> 
      ); 
    }); 
})}

或者更简洁的写法（去掉外层大括号，利用箭头函数隐式返回）：

{newArray?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)?.map((arr: any) => 
  arr 
    .filter((element) => element !== undefined) 
    .map((row: any) => ( 
      <TableRow role="checkbox" key={row.id} className={classes.row} > 
        {row.id} 
      </TableRow> 
    ))
)}

额外优化：更靠谱的数组分块逻辑 #

顺便提一句，你当前的分块代码有个小缺陷：如果原数组长度不是3的倍数，最后几个元素会被漏掉（比如长度为4时，第4个元素永远不会被加入newArray）。可以换个更健壮的实现：

const chunkArray = (arr: any[], chunkSize: number) => {
  const chunks: Array<Array<any>> = [];
  let index = 0;
  while (index < arr.length) {
    chunks.push(arr.slice(index, index + chunkSize));
    index += chunkSize;
  }
  return chunks;
};

// 调用方式：如果codeData可能为undefined，先做空值处理
const newArray = chunkArray(codeData || [], 3);

这个方法会把所有元素都分到块里，最后一块长度不足3也没关系，不会遗漏任何元素~

内容的提问来源于stack exchange，提问作者wefwef цуаefwef