React Native遍历未知键名对象数组渲染键值对方案

你的代码存在两处逻辑错误：

• 错误对最外层数组调用Object.entries()：Object.entries的作用是获取普通对象自身的可枚举键值对，直接传入数组时，返回的是数组索引和对应索引的子对象，根本拿不到子对象内部的键、值
• 直接向Text组件传入数组[key, val]作为子节点：此处的val是对象类型，React Native 不支持直接渲染对象类型的子节点，因此触发报错。

需要做两层遍历：第一层遍历外层的对象数组，第二层对数组内的每个子对象调用Object.entries()，取出内部的键名和对应值，转为可渲染的基础类型后传入Text组件即可：

{
  array.map((item, outerIdx) => {
    return Object.entries(item).map(([key, val]) => {
      return (
        <Text key={`${outerIdx}-${key}`}>
          {key}: {val}
        </Text>
      )
    })
  })
}

• 列表渲染时必须给每个Text组件加唯一的key属性，避免React抛出渲染警告
• 如果后续对象的属性值存在复杂类型（比如嵌套对象、数组），需要先转成字符串再渲染，比如用JSON.stringify(val)处理后再传入，否则仍会触发「对象不能作为React子节点」的报错。

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