多数组渲染表格生成空td标签问题求助

你的问题核心其实是数组合并的逻辑搞错了——你现在把三个数组直接平铺成了一个9元素的数组，但每个元素只自带2个属性，剩下4个属性都是undefined。React渲染时，这些undefined会让<td>标签变成空内容，但标签本身还是会被渲染出来，这些空td就会打乱表格的布局，看起来像是行被向下挤压了。

举个例子，你合并后的第一个元素是{ tre: 1, tro: "Nikkie" }，渲染的时候<td>{i.bla}</td>就会变成<td></td>，一行里有4个这样的空td，自然会让表格行的显示出现问题。

正确的实现方式：按索引合并对应行 #

你需要的是把三个数组中同一位置的元素合并成一行（比如arr1[0]+arr2[0]+arr3[0]作为表格第一行），这样每一行就能拥有完整的6个属性值，不会出现空td。

修改你的tableData函数如下：

tableData() {
  // 处理数组长度不一致的情况，取最长的数组长度来循环
  const maxRowCount = Math.max(arr1.length, arr2.length, arr3.length);
  
  const tableRows = Array.from({ length: maxRowCount }, (_, rowIndex) => {
    // 取出对应行的元素，没有的话用空对象兜底，避免报错
    const row1 = arr1[rowIndex] || {};
    const row2 = arr2[rowIndex] || {};
    const row3 = arr3[rowIndex] || {};
    
    return (
      <tr key={rowIndex}>
        <td>{row1.tre || ''}</td>
        <td>{row1.tro || ''}</td>
        <td>{row2.bla || ''}</td>
        <td>{row2.blo || ''}</td>
        <td>{row3.bra || ''}</td>
        <td>{row3.bru || ''}</td>
      </tr>
    );
  });
  
  return tableRows;
}

为什么原来的逻辑不对？ #

你之前用[...arr1, ...arr2, ...arr3]得到的数组结构是这样的：

[
  { tre: 1, tro: "Nikkie" },
  { tre: 2, tro: "Donia" },
  { tre: 3, tro: "Lavena" },
  { bla: 1, blo: "Carola" },
  { bla: 2, blo: "Rosa" },
  { bla: 3, blo: "Geneva" },
  { bra: 1, bru: "Currie" },
  { bra: 2, bru: "Aura" },
  { bra: 3, bru: "Irwinn" }
]

每一个元素都只有两个属性，所以map渲染时，剩下四个td都是空的，这些空td会占据表格列的位置，导致视觉上的布局错乱。

额外优化点 #

• 用|| ''可以保证当某个位置没有数据时，td里显示空字符串，不会让td出现“塌陷”的情况，同时也不会有多余的占位内容。
• 如果三个数组长度不一致，代码里的Math.max和空对象兜底可以避免出现Cannot read properties of undefined的报错。

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