React Native中如何使用map函数渲染API返回对象的key值

map 是 JavaScript 数组专属的遍历方法，无法直接作用于普通对象，因此你直接对apiData.objectData这个对象调用map才会触发类型报错。

方案1：仅渲染对象的key #

使用Object.keys()提取对象所有key组成数组后再调用map遍历，注意React列表渲染必须给每个子元素加唯一key属性：

{Object.keys(apiData.objectData).map((objectKey) => (
  <Text key={objectKey}>{objectKey}</Text>
))}

方案2：同时渲染key和对应value #

如果后续需要展示键值对内容，可以用Object.entries()直接获取键值对数组：

{Object.entries(apiData.objectData).map(([objectKey, objectValue]) => (
  <View key={objectKey}>
    <Text>字段名：{objectKey}</Text>
    <Text>字段值：{objectValue}</Text>
  </View>
))}

边界情况兼容 #

如果接口返回的objectData可能为空或不存在，建议加兜底逻辑避免运行时报错：

{Object.keys(apiData?.objectData || {}).map((objectKey) => (
  <Text key={objectKey}>{objectKey}</Text>
))}

以上方案对你提到的「单个对象最多3组键值对」的场景完全适配，没有数量限制。

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