繁体   English   中英

在列表项中显示照片 undefined 不是 object

[英]display a photo in a list item undefined is not an object

我有一个产品列表,使用 react-native-elements 中的列表项显示。 我想将产品图片添加为产品名称左侧的“图标”。 我有困难

'未定义不是对象'

当我调用图像时。 我不明白为什么会显示错误,我的数组如下所示:

Object {
    "cost": 1099.99,
    "created_at": "2018-05-17T20:58:31Z",
    "custom_fields": Array [],
    "description": "",
    "family_id": 5,
    "id": 5,
    "incl_tax": 1,
    "is_visible": 1,
    "name": "Apple MacBook Air 13.3'' LED 128 Go SSD 8 Go",
    "photo": Object {
      "_1_": Object {
        "id": 1,
        "order": 1,
        "title_fr": "Apple-MacBook-Air-13-3-LED-128-Go-D-8-Go-RAM-Intel-Core-i5-bicoeur-a-1-8-Ghz-MQD32FN-Nouveau",
        "url": "/i/p-4-6-5-146_5844_5_1.jpg",
      },
    },
    "quantity": "0",
    "reference": "",
    "stock_status": "0",
    "tax_rate_id": 1,
    "unit": "",
    "updated_at": "2018-06-27T10:43:46Z",
    "weight": 0,   },

所以我这样称呼我的照片:

<图片来源={{uri:URL+ item.photo。 1 .url}} 样式={{ 宽度:25,高度:25}}/>

常量“URL”允许我拥有 url 的开头,将数组的 url 的结尾添加到该开头。 对我来说似乎是正确的,我不明白错误,你知道问题出在哪里吗? 我真的需要弄清楚并解决这个问题。

感谢任何愿意花时间阅读我的帖子并帮助我的人。

这部分的代码:

<ListItem
    style={{width:'100%'}}
    containerStyle= {{backgroundColor: item % 2 === 0 ? '#000' : '#ccc'}}
    bottomDivider
    onPress={() => this.props.navigation.navigate('ProductDetails', {productId:parseInt(item.id)})}>
    <ListItem.Content style={{flexDirection: 'row', justifyContent: 'space-between'}}>
      <Image source={{uri:URL+ item.photo._1_.url}}
             style={{ width: 25, height: 25}}/>
      <ListItem.Title style={{width: '65%', fontSize: 16}}>{ ( item.name.length > 20 ) ? item.name.substring(0, 20) + ' ...'  :  item.name}</ListItem.Title>
      <ListItem.Subtitle style={{ color: '#F78400', position: "absolute", bottom: 0, right: 0 }}>{item.cost}€</ListItem.Subtitle>
    </ListItem.Content>
  </ListItem>

看一下这个

<Image source={URL+ item.photo["_1_"].url} style={{ width: 25, height: 25}}/>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM