React Native 故障循环通过数组并显示状态中的图像 url

Question

在这里反应新手。我有一些 React 代码，我试图循环遍历我在 .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>
            <Image
                key={index}
                source={{uri: {item.url}}} />
          </Card>
      )
    });

return (
      <View style={{flex:1}}>

        <CardStack
          cards = {this.state.cards}
        >

         <View>
            {contents}
         </View>
        </CardStack>

我的语法在某处不正确吗？因为它在{item.url} 上出错并告诉我“意外令牌”，但我觉得我正在循环并以这种方式调用数组中各个卡片项的 url 键，不是吗？此外，如果有人能在下面的{contents} 调用中指出下一个错误，我肯定会遇到。

在此先感谢大家，

-充满信心地反应 dweeb。

Answer 1

想通了。至少第一部分——这是因为item.url 不需要额外的花括号。

<Image
  key={index}
  style={[styles.image_card]}
  source={{uri: item.url}} />