Question

我正在尝试通过React Native上的FlatList显示JSON数组的元素。在renderItem（）中，当我尝试访问每个项的键时，不会输出任何内容。所以我尝试渲染每个项目，我的FlatList每行显示一个字符。我查看了FlatList的文档，所以我不确定在将数组作为数据传递给FlatList之前是否需要调整数组。

这是我的JSON数组的格式（目前应该只有一个元素）：

data: (JSON array)    
[    
  { "myAvail":19,    
    "my_ID":"10204166655843580",    
    "friend_ID":"33333",
    "friendName":"JohnSmith",
    "myStart":"2018-03-21 10:30:27",
    "friendStart":"2018-03-21 10:45:00"
  }
]

这是我在render（）中的用法：

render() {
    if (this.state.isLoading) {
        return (
            <View style={{flex:1, paddingTop: 20}}>
                <ActivityIndicator />
            </View>
        );
    }

    console.log("source data for FlatList - ", this.state.dataSource);

    return (
        <View>
            <FlatList
                data = {this.state.dataSource}
                renderItem={({item}) => <Text> {item} </Text>}
                keyExtractor= { (item, index) => index}
            />
        </View>
    );
}

控制台的输出如下所示：

source data for FlatList -  [{"myAvail":19,"my_ID":"10204166655843580","friend_ID":"33333","friendName":"DarrenAtkinson","myStart":"2018-03-21 10:30:27","friendStart":"2018-03-21 10:45:00"}]

然而，屏幕上的最终结果是每行打印一个字符。我的猜测是每个角色都被视为一个项目，但我不确定如何解决这个问题。

感谢您的时间。

Answer 1

您可以这样设置dataSource：

data = {[this.state.dataSource]}

这会将字符串仅作为一项

React Native FlatList：renderItem（）在JSON数组

1 个答案: