React Native FlatList:renderItem() 在 JSON 数组上逐个字符运行

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

你可以像这样设置数据源：

data = {[this.state.dataSource]}

这会将字符串仅视为一个项目