react-native - 嵌套循环 React Native
问题描述
我试图在反应原生渲染中做一个嵌套循环,但我得到了意外的错误标记。任何人都可以帮忙吗?
这是我的代码:
<ScrollView style={{backgroundColor: 'rgba(255, 0, 0, 0.1)'}}>
{
items.map((val,key) => {
return <View key={key}>
<Separator style={{backgroundColor: 'rgba(255, 0, 0, 0.1)'}}>
<Text>{key+1} - {val.title}</Text>
</Separator>
{
items[key].videos.map((value,index) => {
return <ListItem noIndent key={index} style={{backgroundColor: 'rgba(255, 0, 0, 0.1)'}} onPress={() => this.setState({video_url: items[key].videos[index].video_url})}>
<Body>
<Text style={{paddingLeft: 25}}>{index+1} {value.title}</Text>
</Body>
</ListItem>
})
items[key].videos.map((value,index) => {
return <ListItem noIndent key={index} style={{backgroundColor: 'rgba(255, 0, 0, 0.1)'}} >
<Body>
<Text style={{paddingLeft: 25}}>{index+1} {value.title}</Text>
</Body>
</ListItem>
})
}
</View>
})
}
</ScrollView>
这是我的错误 错误图像
解决方案
keyExtractor = (item, index) => index.toString()
const ListItem = (props) => {
return
<View>
{props.items.videos.map(row => {
return <View>row.title</View>;
})}
</View>
}
render () {
return (
<FlatList
keyExtractor={this.keyExtractor}
data={items}
renderItem={items=> {
return <ListItem {...items} />;
/>
)
你能测试一下吗..
推荐阅读
- bash - 在 bash 脚本的第二个终端上执行命令
- sql - 发现查询故障之间的差异?
- aws-lambda - 有时我的电子邮件已发送,但有时却没有?
- c# - 需要缩小数据宽度以适应表格字段
- javascript - setTimeout 不适用于 div 加载或锚定
- javascript - 不能在 npm 包中使用别名
- python-3.x - 如何提高 CNN 的准确率?
- batch-file - 批处理脚本:如何移动和替换现有文件
- python - a = [0] 和 a = [i for i in range(1)] 之间的 sizeof 差异
- spring - 没有符合条件的 bean 类型