[英]React Native Mapping Fail
React newbie here. 在这里反应新手。 I've got some React Code where I'm trying to loop through an array I provided in my .state and display the image. 我有一些React代码,我试图在.state中提供的数组中循环并显示图像。 (using 'Image' and using a Card object from https://github.com/lhandel/react-native-card-stack-swiper to display the Image inside the Card object, which itself is nested inside the Object, but that's neither here nor there.) (使用“图像”并使用https://github.com/lhandel/react-native-card-stack-swiper中的Card对象在Card对象中显示图像,该对象本身嵌套在对象中,但这都不是这里还是那里。)
export default class App extends Component<{}> {
constructor(props) {
super(props);
this.state = {
cards: [
{itemname: 'Item 1',
restoname: 'Resto 1',
url: 'https://res.cloudinary.com/grubhub/image/upload/v1515191165/bkf4niv9okipbc8y6o8h.jpg',
description: 'Desc 1'},
{itemname: 'Item 2',
restoname: 'Resto 2',
url: 'https://res.cloudinary.com/grubhub/image/upload/v1514060352/twhriy3hvbzayktrjp91.jpg',
description: 'Desc 2'}
]
};
}
render() {
const contents = this.state.cards.map((item, index) => {
return (
<Card key={'Card_' + index}>
<Image
key={index}
source={{uri: item.url}} />
</Card>
)
});
return (
<View style={{flex:1}}>
<CardStack
cards = {this.state.cards}
>
<View>
{contents}
</View>
</CardStack>
Where I'm falling short, is the last part --- if I define contents as that mapping where it returns the <Card>
and <Image>
object inside of it, shouldn't that show up at the end when I'm calling {contents}
inside the <CardStack>
object? 我最欠缺的地方是最后一部分---如果我将内容定义为在其中返回<Card>
和<Image>
对象的映射,则当我在<CardStack>
对象中调用{contents}
? Nothing is showing up and there is no error message either. 没有任何显示,也没有错误消息。
Also, in addition to nothing showing up initially, if I swipe to go to the next card, I get an error of: 此外,除了最初没有显示任何内容外,如果我滑动以转到下一张卡片,还会收到以下错误消息:
undefined is not an object (evaluating 'this.state.cards[sindex - 2].props`) undefined不是对象(评估'this.state.cards [sindex-2] .props`)
Assign the key to Card not Image, like this: 将密钥分配给Card not Image,如下所示:
return (
<Card key={index}>
<Image
source={{uri: item.url}} />
</Card>
)
Key will be required for the wrapper element when creating elements dynamically, and in this case that element is Card. 动态创建元素时,包装元素需要密钥,在这种情况下,该元素是Card。
Also, As per the DOC , you need to put the Card element directly inside CardStack, so remove the view and write it like this: 另外,根据DOC ,您需要将Card元素直接放在CardStack中,因此删除视图并按如下方式编写它:
<CardStack> {contents} </CardStack>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.