React中如何在数组map遍历中同时获取两个连续元素配对渲染

你原来的写法不符合JavaScript数组map方法的语法规范，map的回调函数仅支持(当前元素, 索引, 原数组)三个入参，无法直接拿到相邻配对元素，同时你的示例代码还存在标签嵌套错误，<span>的闭合标签误写为</div>，需要注意修正。你可以通过以下几种方式实现需求：

方案1：直接生成分组长度的数组（性能最优） #

通过Array.from直接生成分组后的数组长度（原数组长度除以2向上取整），直接按索引取值配对，无需额外遍历原数组：

const array = [1,2,3,4,5,6];

function PairList() {
  return (
    <>
      {Array.from({ length: Math.ceil(array.length / 2) }, (_, groupIndex) => {
        const firstItem = array[groupIndex * 2];
        const secondItem = array[groupIndex * 2 + 1];
        // 兼容数组长度为奇数的场景，第二个元素不存在时可按需展示默认值
        return (
          <div key={groupIndex}>
            <span>{firstItem}{secondItem ? ` - ${secondItem}` : ''}</span>
          </div>
        )
      })}
    </>
  )
}

运行后渲染输出完全符合你的预期：

1 - 2
3 - 4
5 - 6

方案2：先分组再渲染（可读性最优） #

如果需要复用分组后的数组，可以先通过reduce把原数组处理为二维分组数组，再遍历渲染，逻辑更清晰易维护：

const array = [1,2,3,4,5,6];
// 处理后得到分组数组 [[1,2], [3,4], [5,6]]
const pairedArray = array.reduce((result, item, index) => {
  if (index % 2 === 0) {
    result.push([item]);
  } else {
    result[result.length - 1].push(item);
  }
  return result;
}, []);

function PairList() {
  return (
    <>
      {pairedArray.map(([item1, item2], index) => (
        <div key={index}>
          <span>{item1} - {item2}</span>
        </div>
      ))}
    </>
  )
}

注意：React列表渲染要求每个列表项必须绑定唯一的key属性，以上示例使用分组索引作为key仅适用于数组固定不变的场景，如果数组会动态增删修改，建议使用元素本身的唯一标识作为key值。

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