[英]Map nested array to render in React Native
我的项目中有一个嵌套数组 object。 这是我拥有的数组:
const listItem = [ {name:'Patrick star',id:"1",costs:[{name:'Read Book'},{name:'Drink water'}]}, {name:'Gallileo',id:"2",costs:[{name:'Read Book'},{name:'Drink water'},,{name:'Walking'}]}, {name:'Einsten',id:"3",costs:[{name:'Read Book'},{name:'Drink water'}]}, {name:'Peterson',id:"4",costs:[{name:'Read Book'},{name:'Drink water'}]}, {name:'Schwarzenneger',id:"5",costs:[{name:'Read Book'},{name:'Drink water'}]}, {name:'Dostoyevsky',id:"6",costs:[{name:'Read Book'},{name:'Drink water'}]} ]
现在,我在我的项目中渲染它。 名称显示正常,但我无法通过映射添加costs
。 这是我所达到的:
<FlatList style={{marginTop:10}} data={listItem} renderItem={({item})=>( <View style={{justifyContent:'center',marginBottom:10}}> <Text>{item.name}</Text> {listItem.map((u,i) => { return ( <Text>{u.costs[i].name}</Text> //this line throws error ) }) } </View> )} />
我可能在映射上做错了什么。
你必须 map 你的成本而不是 listItem:
<FlatList
style={{marginTop:10}}
data={listItem}
renderItem={({item})=>(
<View style={{justifyContent:'center',marginBottom:10}}>
<Text>{item.name}</Text>
{item.costs.map(cost => {
return (
<Text>{cost.name}</Text>
)
})
}
</View>
)}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.