时间戳

首页 > 解决方案 > 来自本地 json 的数据不显示在 FlatList 中

json - 来自本地 json 的数据不显示在 FlatList 中

问题描述

我正在尝试从我拥有的本地 json 文件中显示信息。json 数据确实被记录到控制台，看起来不错，但我无法将其显示为 FlatList。

这是我的 json 文件：

{
"countries": [
    {
        "id": 0,
        "code": "US",
        "display_name": "USA",
        "area_code": 123
    },
    {
        "id": 1,
        "code": "FR",
        "display_name": "FRANCE",
        "area_code": 123
    },
    {
        "id": 2,
        "code": "AUS",
        "display_name": "AUSTRALIA",
        "area_code": 123
    }
]
}

这是我的平面列表：

//@ts-ignore
import CountryList from '../utils/countries.json';

const CountryPicker = () => {    
    return (
        <View style={pickerStyles.container}>
            <Text style={pickerStyles.title}>Pick your location</Text>
            
            <FlatList
                    data={CountryList}
                    //@ts-ignore
                    renderItem={CountryList.countries.map(country => {
                        return (
                            <Text>{country.display_name}</Text>
                        );
                    })}
                    keyExtractor={country => country.id}
                />
        </View>
    );
}

标签： jsonreact-native

解决方案

您应该像下面那样做，因为 Data prop 需要一个数组并且您正在传递一个对象。

     <FlatList
                data={CountryList.countries}
                //@ts-ignore
                renderItem={({item}) => {
                    return (
                        <Text>{item.display_name}</Text>
                    );
                })}
                keyExtractor={item => item.id}
            />

推荐阅读