javascript - React Native Trouble 循环遍历数组并显示状态图像 url

Question

React 新手在这里。我有一些 React 代码，我试图在其中循环遍历我在 .state 中提供的数组并显示图像。 (使用 'Image' 并使用 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>
            <Image
                key={index}
                source={{uri: {item.url}}} />
          </Card>
      )
    });

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

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

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

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

非常感谢大家，

-充满自信地 react dweeb。

Answer 1

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

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