Question

在这里反应新手。我有一些React Code，我试图遍历我在.state中提供的数组并显示图像。（使用'Image'并使用来自https://github.com/lhandel/react-native-card-stack-swiper的Card对象来显示Card对象中的Image，它本身嵌套在Object中，但这既不在这里也不在那里。）

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>对象内部的映射，则不应该显示最后，当我在{contents}对象中调用<CardStack>时？什么都没有出现，也没有错误信息。

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

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

Answer 1

将密钥分配给卡而不是图像，如下所示：

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

动态创建元素时，包装元素将需要键，在这种情况下，该元素为Card。

此外，根据 DOC ，您需要将Card元素直接放入CardStack中，因此请删除视图并将其写为：

<CardStack> {contents} </CardStack>

React Native Mapping失败

1 个答案: