如何将对象数组的最后两个对象合并为单个对象以实现表格同列数据渲染？

完全可以达成你的需求，根据是否需要复用逻辑，有两种常用实现方式：

方案1：渲染时直接做逻辑判断 无需修改原数组 #

适合仅当前表格需要合并、不需要改动原始数据结构的场景，直接修改现有渲染逻辑即可：

<tbody>
  {row.map(data => {
    // 匹配到区号字段时，拼接对应号码内容生成单元格
    if (data.name === 'PRI_PHN_AREA_CD') {
      const phoneNr = row.find(item => item.name === 'PRI_PHN_NR')?.value || '';
      return <td>{`${data.value} ${phoneNr}`.trim()}</td>
    }
    // 跳过已被合并的号码字段，避免重复生成单元格
    if (data.name === 'PRI_PHN_NR') return null;
    // 其余字段保持原有渲染逻辑
    return <td>{data.value}</td>
  })}
</tbody>

方案2：预处理数组合并对象 适合多场景复用 #

如果这个合并逻辑在多个页面/表格中使用，可以先对原数组做预处理，将两个电话相关的对象合并为单个对象，之后渲染逻辑完全沿用你原有的写法，无需改动：

// 先处理原始行数据
const processedRow = row.map(item => {
  // 匹配到区号字段，合并号码值生成新对象
  if (item.name === 'PRI_PHN_AREA_CD') {
    const phoneNr = row.find(r => r.name === 'PRI_PHN_NR')?.value || '';
    return {
      name: 'PRI_PHONE',
      value: `${item.value} ${phoneNr}`.trim()
    }
  }
  // 标记待合并的号码字段，后续过滤避免重复
  if (item.name === 'PRI_PHN_NR') return null;
  return item;
}).filter(Boolean);

// 后续直接遍历处理后的数组渲染，和原逻辑完全一致
<tbody>
  {processedRow.map(data => <td>{data.value}</td>)}
</tbody>

两种方案都用了trim()做兼容处理，当某一个电话字段为空时，不会出现多余的空白空格，适配异常数据场景。 #

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