React中如何将数组元素按指定索引填充为两列表格？

要把一维数组的元素按每两个一组填充到表格的两列中，有两种常用实现方式：

方式一：先分组数组再渲染 #

先把原数组拆分成每2个元素为一组的二维数组，再遍历这个二维数组生成表格行：

import React from 'react';

const App = () => {
  const array = [
    {value : 1},
    {value : 2},
    {value : 3},
    {value : 4},
    {value : 5},
    {value : 6}, // 修正原数组最后一个值，和示例表格对应
  ];

  // 将数组按每2个元素分组
  const groupedArray = array.reduce((acc, curr, index) => {
    const groupIndex = Math.floor(index / 2);
    if (!acc[groupIndex]) {
      acc[groupIndex] = [];
    }
    acc[groupIndex].push(curr);
    return acc;
  }, []);

  return (
    <table>
      <thead>
        <tr>
          <th>Column A</th>
          <th>Column B</th>
        </tr>
      </thead>
      <tbody>
        {groupedArray.map((group, rowIndex) => (
          <tr key={rowIndex}>
            <td>{group[0]?.value}</td>
            <td>{group[1]?.value}</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
};

export default App;

方式二：利用数组索引直接渲染 #

不需要提前分组，在map遍历的时候只处理偶数索引的元素，同时取当前和下一个元素生成表格行，跳过奇数索引避免重复渲染：

import React from 'react';

const App = () => {
  const array = [
    {value : 1},
    {value : 2},
    {value : 3},
    {value : 4},
    {value : 5},
    {value : 6},
  ];

  return (
    <table>
      <thead>
        <tr>
          <th>Column A</th>
          <th>Column B</th>
        </tr>
      </thead>
      <tbody>
        {array.map((item, index) => {
          // 仅处理偶数索引元素，避免重复生成行
          if (index % 2 !== 0) return null;
          // 获取当前行的两个元素
          const itemA = item;
          const itemB = array[index + 1];
          return (
            <tr key={index}>
              <td>{itemA.value}</td>
              <td>{itemB?.value}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  )
};

export default App;

注意事项 #

• 给每个<tr>添加唯一key属性，符合React列表渲染规范，这里用分组索引或原数组索引均可。
• 使用可选链操作符?.处理数组长度为奇数的情况，避免出现undefined报错。
• 原数组最后一个元素的value为5，和示例表格的6不符，记得修正为对应值。

内容的提问来源于stack exchange，提问作者김현주