反应本机映射失败

Question

在这里反应新手。 我有一些React代码，我试图在.state中提供的数组中循环并显示图像。 （使用“图像”并使用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>

我最欠缺的地方是最后一部分---如果我将内容定义为在其中返回<Card>和<Image>对象的映射，则当我在<CardStack>对象中调用{contents} ？ 没有任何显示，也没有错误消息。

此外，除了最初没有显示任何内容外，如果我滑动以转到下一张卡片，还会收到以下错误消息：

undefined不是对象（评估'this.state.cards [sindex-2] .props`）

Answer 1

将密钥分配给Card not Image，如下所示：

return (
   <Card key={index}>
       <Image
          source={{uri: item.url}} />
   </Card>
)

动态创建元素时，包装元素需要密钥，在这种情况下，该元素是Card。

另外，根据DOC ，您需要将Card元素直接放在CardStack中，因此删除视图并按如下方式编写它：

<CardStack> {contents} </CardStack>