Question

我已经成功地从API获取数据，还能够将对象作为道具传递给下一个组件，我传递对象的代码是：

在接收端，当我通过控制台登录this.props.product时，可以看到我的数据：

但是当我尝试渲染数据时，我得到一个空白屏幕，我渲染数据的代码是：

unsigned int

Answer 1

根据您的显示，this.props.product看起来像其array of object。

您需要将map用于iterate阵列并显示产品。

this.props.product.map((singleProduct, index) => {
    return (
        <Col style={this.props.isRight ? style.leftMargin : style.rightMargin}>
<Card transparent>
  <CardItem cardBody>
    <Button transparent style={style.button} onPress={() => this.pressed()}>
      <Image source={{ uri: singleProduct.image }} style={style.image} />
      <View style={style.border} />
    </Button>
  </CardItem>
  <CardItem style={{ paddingTop: 0 }}>
    <Button style={{ flex: 1, paddingLeft: 0, paddingRight: 0, paddingBottom: 0, paddingTop: 0 }}
      transparent
      onPress={() => this.pressed()}
    >
      <Body>
        <Text
          style={{ fontSize: 16 }}
          numberOfLines={1}
        >{singleProduct.name}</Text>
        <View style={{ flex: 1, width: '100%', alignItems: 'center' }}>
          <View style={style.line} />
          <Text style={style.price}>{singleProduct.price}</Text>
          <View style={style.line} />
        </View>
      </Body>
    </Button>
  </CardItem>
</Card>
    );
})

无法在渲染方法中从JSON映射数据，模拟器上的空白屏幕

1 个答案: