Question

我有一个对象，我通过了另一条路线，并且想要显示它持有的图像。我正在检查是否收到这样的道具：

  checkParams = () => {
    let params = this.props.navigation.state.params;
    console.log("comments.js params= ", params);

    if (params.photoId) {

      this.setState({
        photoId: params.photoId,
        REAL: params.REAL,
        FAKE: params.FAKE,
        url: params.url,
        author: params.author,
        posted: params.posted,
        caption: params.caption
      });

      this.fetchComments(params.photoId);
    }
  };

console.log（“ comments.js params =”，params）给出：

comments.js params=  Object {
  "FAKE": 0,
  "REAL": 0,
  "author": "USER",
  "caption": "CAPTION",
  "photoId": "47d5-9420-c99a-7459-640d",
  "posted": "72 minutes ago",
  "url": Array [
    Object {
      "url": "https://firebasestorage.googleapis.com/v0/b/...someURL...",
    },
    Object {
      "url": "https://firebasestorage.googleapis.com/v0/b/...someURL...",
    },
    Object {
      "url": "https://firebasestorage.googleapis.com/v0/b/...someURL...",
    },
    Object {
      "url": "https://firebasestorage.googleapis.com/v0/b/...someURL...",
    },
  ],
}

要显示所有“ URL”，我正在这样做：

          {
            (this.state.url).map(photoItem => (
              <Image 
                source={{ uri: photoItem.url }}
              />
            ))
          }

但是，我不断收到此错误消息：

TypeError: undefined is not an object (evaluating 'this.state.url.map)

我不明白我在做什么错。

Answer 1

如果 this.state.url ：

{
  "FAKE": 0,
  "REAL": 0,
  "author": "USER",
  "caption": "CAPTION",
  "photoId": "47d5-9420-c99a-7459-640d",
  "posted": "72 minutes ago",
  "url": [
    {
      "url": "https://firebasestorage.googleapis.com/v0/b/...someURL...",
    },
    {
      "url": "https://firebasestorage.googleapis.com/v0/b/...someURL...",
    },
    {
      "url": "https://firebasestorage.googleapis.com/v0/b/...someURL...",
    },
    {
      "url": "https://firebasestorage.googleapis.com/v0/b/...someURL...",
    },
  ],
}

您可以这样做：

<View>
  {this.state.url.map((img, index) => {
    return <Image source={{uri: img.url }} key={index} style={imgStyle}/>;
  })}
<View/>

演示：https://snack.expo.io/@abranhe/images-mapping

App.js

import React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import data from './data';

export default () => {
  return (
    <View style={styles.container}>
      {data.url.map((image, index) => {
        return <Image source={{ uri: image.url }} style={styles.image} />;
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 150,
    height: 150,
    resizeMode: 'contain',
  },
});

data.js

export default {
  FAKE: 0,
  REAL: 0,
  author: 'USER',
  caption: 'CAPTION',
  photoId: '47d5-9420-c99a-7459-640d',
  posted: '72 minutes ago',
  url: [
    {
      url:
        'https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313__340.jpg',
    },
    {
      url:
        'https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    },
    {
      url:
        'https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2018/2-dog.jpg',
    },
    {
      url: 'https://www.guidedogs.org/wp-content/uploads/2018/01/Mobile.jpg',
    },
  ],
};

React Native：通过地图显示多个图像

1 个答案: