如何在React Native中单独展示Languages对象的全部标题？

问题描述 #

我需要在React Native中展示以下JSON数据里Languages数组中所有对象的Title字段：

{
    "Languages": [
        {
            "PKM": "Languages",
            "Title": "Tamil2",
        },
        {
            "PKM": "Languages",
            "Title": "தமிழ்",
        },
        {
            "PKM": "Languages",
            "Title": "English",
        }
    ],
    "status": "success",
    "message": "Retrieve Success!"
}

预期是单独显示这三个标题，但使用JS的JSON.parse()方法后只能显示单个标题，求解决方法。

解决方法 #

1. 正确解析JSON数据 #

首先确保已将JSON字符串正确解析为JavaScript对象：

const jsonStr = `{"Languages":[{"PKM":"Languages","Title":"Tamil2"},{"PKM":"Languages","Title":"தமிழ்"},{"PKM":"Languages","Title":"English"}],"status":"success","message":"Retrieve Success!"}`;
const parsedData = JSON.parse(jsonStr);
// parsedData.Languages 即为包含所有语言对象的数组

2. 遍历数组渲染所有标题 #

在React Native中，有两种常用方式批量渲染数组内容：

方式一：使用map()直接渲染（适合短列表）

在函数组件中遍历数组，返回每个标题对应的文本组件：

import React from 'react';
import { View, Text } from 'react-native';

const LanguageList = () => {
  const jsonStr = `{"Languages":[{"PKM":"Languages","Title":"Tamil2"},{"PKM":"Languages","Title":"தமிழ்"},{"PKM":"Languages","Title":"English"}],"status":"success","message":"Retrieve Success!"}`;
  const parsedData = JSON.parse(jsonStr);
  const languages = parsedData.Languages;

  return (
    <View style={{ padding: 16 }}>
      {languages.map((lang, index) => (
        <Text 
          key={index} 
          style={{ fontSize: 16, marginVertical: 8 }}
        >
          {lang.Title}
        </Text>
      ))}
    </View>
  );
};

export default LanguageList;

注意：必须给每个子元素添加唯一key属性，示例中用数组索引临时替代，实际项目建议使用lang.PKM + index这类更稳定的唯一标识。

方式二：使用FlatList组件（推荐长列表）

如果数据量较大，FlatList支持懒加载和性能优化，更适合生产环境：

import React from 'react';
import { View, FlatList, Text } from 'react-native';

const LanguageList = () => {
  const jsonStr = `{"Languages":[{"PKM":"Languages","Title":"Tamil2"},{"PKM":"Languages","Title":"தமிழ்"},{"PKM":"Languages","Title":"English"}],"status":"success","message":"Retrieve Success!"}`;
  const parsedData = JSON.parse(jsonStr);
  const languages = parsedData.Languages;

  const renderItem = ({ item }) => (
    <Text style={{ fontSize: 16, marginVertical: 8, paddingHorizontal: 16 }}>
      {item.Title}
    </Text>
  );

  return (
    <View>
      <FlatList
        data={languages}
        renderItem={renderItem}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  );
};

export default LanguageList;

常见问题排查 #

如果之前只能显示单个标题，大概率是直接访问了数组的某一个索引（比如parsedData.Languages[0].Title）而没有遍历整个数组，只要对Languages数组做完整遍历即可解决问题。

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