如何在React中渲染包含随机键值的对象数组？

你遇到的问题本质是每个对象的键是随机生成的，没法通过固定的属性名直接访问对应的值，所以用map的时候得先把每个对象的键和值提取出来。

基础实现（每个对象仅一个键值对） #

假设数组里每个对象只有一组键值对，直接提取键和值即可：

function YourComponent() {
  const arr = [
    { 789: 'hello world' },
    { 101: 'foo bar' }
  ];

  return (
    <div>
      {arr.map((obj, idx) => {
        // 获取当前对象的唯一键
        const [key] = Object.keys(obj);
        // 通过键拿到对应的值
        const value = obj[key];
        // 渲染目标标签，key用idx兜底，最好用key本身（如果键唯一）
        return <p key={key || idx}>{key} is: {value}</p>;
      })}
    </div>
  );
}

兼容多键值对的情况 #

如果数组里的对象可能包含多个随机键值对，就嵌套一层遍历处理：

function YourComponent() {
  const arr = [
    { 123: 'aaa', 456: 'bbb' },
    { 789: 'ccc' }
  ];

  return (
    <div>
      {arr.map((obj, arrIdx) => (
        <div key={arrIdx}>
          {/* 遍历对象的所有键值对 */}
          {Object.entries(obj).map(([key, value], entryIdx) => (
            <p key={`${arrIdx}-${entryIdx}`}>{key} is: {value}</p>
          ))}
        </div>
      ))}
    </div>
  );
}

注意点 #

• map方法必须给每个子元素加唯一的key属性，避免React警告；如果随机键本身是唯一的，优先用它当key，比index更稳定。
• Object.keys()用于获取对象的所有键，Object.entries()直接获取键值对数组，两种方式都能解决你的问题。

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