無法在渲染方法中從JSON映射數據，模擬器上的空白屏幕

Question

我已經成功地從API獲取數據，還能夠在下一個組件中將對象作為道具傳遞，我傳遞對象的代碼是：

if (stateItems.length > 0) {
        console.log(stateItems[0]);
        if (stateItems[i + 1]) {
            items.push(
                <Grid key={i}>
                    <Product key={stateItems[i].product_id} product={stateItems[i]} />
                    <Product key={stateItems[i + 1].product_id} product={stateItems[i + 1]} isRight />
                </Grid>
            );
        }
    }

在接收端，當我通過控制台登錄this.props.product時，可以看到我的數據：

但是當我嘗試渲染數據時，我得到一個空白屏幕，我渲染數據的代碼是：

render() {
console.log(this.props.product)
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: this.props.product.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}
            >{this.props.product.name}</Text>
            <View style={{ flex: 1, width: '100%', alignItems: 'center' }}>
              <View style={style.line} />
              <Text style={style.price}>{this.props.product.price}</Text>
              <View style={style.line} />
            </View>
          </Body>
        </Button>
      </CardItem>
    </Card>
  </Col>
);}

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 個解決方案

解決方案1
0 2018-08-06 08:48:44

無法在渲染方法中從JSON映射數據，模擬器上的空白屏幕

問題描述

1 個解決方案

解決方案1 0 2018-08-06 08:48:44

解決方案1
0 2018-08-06 08:48:44