如何正确映射包含未知对象键的数组？

当前代码写法：

const array = [
  {name: 'somename', lastname: 'sometext'}
  {name: 'somename1', lastname: 'sometext1'}
  {name: 'somename2', lastname: 'sometext2'}
]

function Component({array}) {
  return (
    {array.map(( {name, lastname} ) => (
      <p>{name}<p>
      <p>{lastname}<p>
    ))}
  )
}

需求是传入包含任意未知键的对象数组，实现类似如下的动态渲染效果：

{array.map(( {unknownKey, unknownKey1} ) => (
  <p>{unknownKey}<p>
  <p>{unknownKey1}<p>
))}

要处理任意未知键的对象，核心是动态遍历对象的所有键值对，而非提前解构固定键。按以下步骤修改代码：

1. 修正原代码语法错误：

   • 数组内的对象之间缺少逗号，会触发语法报错
   • JSX的<p>标签未闭合，需补全为</p>
   • map渲染列表时必须给每个子元素添加唯一key属性

2. 动态遍历对象键值：
   使用Object.entries()方法获取对象的键值对数组，再遍历每一组键值完成渲染。

最终修正后的代码：

// 补全数组对象间的逗号
const array = [
  {name: 'somename', lastname: 'sometext'},
  {name: 'somename1', lastname: 'sometext1'},
  {name: 'somename2', lastname: 'sometext2'}
]

function Component({ array }) {
  return (
    <div>
      {array.map((item, index) => (
        {/* 优先用对象自身唯一标识当key，无唯一标识时临时用index */}
        <div key={index}>
          {Object.entries(item).map(([key, value]) => (
            <p key={key}>{value}</p>
          ))}
        </div>
      ))}
    </div>
  )
}

补充说明： #

• 若需要同时显示键名和值，可将<p>{value}</p>修改为<p>{key}: {value}</p>
• 列表key优先使用对象自带的唯一标识（如id），避免依赖index（列表顺序变化时可能引发渲染性能问题）

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