反應本機映射失敗

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>