当我console.log特定键值产品数据时，我得到了重复打印。产品数据是静态的，并作为JSON作为productData变量导入。
我正在通过映射产品数据并将单个产品传递到幻灯片组件进行渲染来生成可滑动提要。当我尝试渲染videoSlide时，我收到未定义的url错误，因为视频对象返回多个值，即使它只返回一个值。
代码
class Feed extends Component {
constructor(props) {
super(props)
this.state = {
loadQueue: [0, 0, 0, 0],
}
this.loadHandle = this.loadHandle.bind(this)
}
loadHandle(i) {
let loadQueue = this.state.loadQueue
loadQueue[i] = 1
this.setState({
loadQueue
})
}
render() {
return (
<View style={{ flex: 1 }}>
<Swiper loadMinimal loadMinimalSize={1} showsPagination={false} style={styles.wrapper} loop={false} horizontal={false}>
{
productData.map((product, i) =>
(product.hasVideo ? (<VideoSlide
loadHandle={this.loadHandle}
loaded={!!this.state.loadQueue[i]}
product={product}
i={i}
key={i}
/>) : (
<Slide
loadHandle={this.loadHandle}
loaded={!!this.state.loadQueue[i]}
product={product}
i={i}
key={i}
/>
))
)
}
</Swiper>
</View>
)
}
}
如果产品JSON中有视频，这就是我要呈现的组件。
const VideoSlide = props => {
var videos = props.product.videos
console.log(videos)
// var firstVideoObj = videos[0]
// console.log(firstVideoObj)
// var firstVideoUri = Object.values(firstVideoObj)[0]
console.log(firstVideoUri); // THIS RETURNS ERROR (See console output)
return (
<View style={styles.slide} key={props.i}>
<View>
<Video
source={{ uri: firstVideoUri }}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="fit"
shouldPlay
isLooping
style={{ width: width, height: height }}
/>
</View>
</View>
);
}
单个产品的控制台输出
Array [
Object {
"alt": "",
"date_created": "2017-03-23T14:03:08",
"date_created_gmt": "2017-03-23T20:03:08",
"date_modified": "2017-03-23T14:03:08",
"date_modified_gmt": "2017-03-23T20:03:08",
"id": 999,
"name": "",
"src": "https://thingd-media-ec6.thefancy.com/video/upload/cardboardsafari/saleitem/3076591/20190327012437/skuklzzzz.mp4",
},
]
Array [
Object {
"alt": "",
"date_created": "2017-03-23T14:03:08",
"date_created_gmt": "2017-03-23T20:03:08",
"date_modified": "2017-03-23T14:03:08",
"date_modified_gmt": "2017-03-23T20:03:08",
"id": 999,
"name": "",
"src": "https://thingd-media-ec6.thefancy.com/video/upload/cardboardsafari/saleitem/3076591/20190327012437/skuklzzzz.mp4",
},
]
Array []
Array []
数据
[
{
"id": 799,
"name": "Cat Scratch Turntable",
"slug": "ship-your-idea-22",
"permalink": "https://example.com/product/ship-your-idea-22/",
"date_created": "2017-03-23T17:03:12",
"date_created_gmt": "2017-03-23T20:03:12",
"date_modified": "2017-03-23T17:03:12",
"date_modified_gmt": "2017-03-23T20:03:12",
"type": "variable",
"status": "publish",
"hasVideo": "true",
"featured": false,
"catalog_visibility": "visible",
"description": "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n",
"short_description": "Cardboard mixing deck-shaped scratching mat for your fluffy feline friends. Comes with a spinnable deck and posable arm for your cat to paw. Easy self-assembly with clear, illustrated instructions included.",
"sku": "",
"price": "",
"regular_price": "",
"sale_price": "",
"date_on_sale_from": null,
"date_on_sale_from_gmt": null,
"date_on_sale_to": null,
"date_on_sale_to_gmt": null,
"price_html": "",
"on_sale": false,
"purchasable": false,
"total_sales": 0,
"virtual": false,
"downloadable": false,
"downloads": [],
"download_limit": -1,
"download_expiry": -1,
"external_url": "",
"button_text": "",
"tax_status": "taxable",
"tax_class": "",
"manage_stock": false,
"stock_quantity": null,
"stock_status": "instock",
"backorders": "no",
"backorders_allowed": false,
"backordered": false,
"sold_individually": false,
"weight": "",
"dimensions": {
"length": "",
"width": "",
"height": ""
},
"shipping_required": true,
"shipping_taxable": true,
"shipping_class": "",
"shipping_class_id": 0,
"reviews_allowed": true,
"average_rating": "0.00",
"rating_count": 0,
"related_ids": [
31,
22,
369,
414,
56
],
"upsell_ids": [],
"cross_sell_ids": [],
"parent_id": 0,
"purchase_note": "",
"categories": [
{
"id": 9,
"name": "Clothing",
"slug": "clothing"
},
{
"id": 14,
"name": "T-shirts",
"slug": "t-shirts"
}
],
"tags": [],
"videos": [{
"id": 999,
"date_created": "2017-03-23T14:03:08",
"date_created_gmt": "2017-03-23T20:03:08",
"date_modified": "2017-03-23T14:03:08",
"date_modified_gmt": "2017-03-23T20:03:08",
"src": "https://thingd-media-ec6.thefancy.com/video/upload/cardboardsafari/saleitem/3076591/20190327012437/skuklzzzz.mp4",
"name": "",
"alt": ""
}],
"images": [
{
"id": 795,
"date_created": "2017-03-23T14:03:08",
"date_created_gmt": "2017-03-23T20:03:08",
"date_modified": "2017-03-23T14:03:08",
"date_modified_gmt": "2017-03-23T20:03:08",
"src": "https://thefancy-media-ec1.thefancy.com/1280/20181116/1820096803995914125_35e4a3c492f2.jpg",
"name": "",
"alt": ""
},
{
"id": 796,
"date_created": "2017-03-23T14:03:09",
"date_created_gmt": "2017-03-23T20:03:09",
"date_modified": "2017-03-23T14:03:09",
"date_modified_gmt": "2017-03-23T20:03:09",
"src": "https://example.com/wp-content/uploads/2017/03/T_4_back-10.jpg",
"name": "",
"alt": ""
},
{
"id": 797,
"date_created": "2017-03-23T14:03:10",
"date_created_gmt": "2017-03-23T20:03:10",
"date_modified": "2017-03-23T14:03:10",
"date_modified_gmt": "2017-03-23T20:03:10",
"src": "https://example.com/wp-content/uploads/2017/03/T_3_front-10.jpg",
"name": "",
"alt": ""
},
{
"id": 798,
"date_created": "2017-03-23T14:03:11",
"date_created_gmt": "2017-03-23T20:03:11",
"date_modified": "2017-03-23T14:03:11",
"date_modified_gmt": "2017-03-23T20:03:11",
"src": "https://example.com/wp-content/uploads/2017/03/T_3_back-10.jpg",
"name": "",
"alt": ""
}
],
"attributes": [
{
"id": 6,
"name": "Color",
"position": 0,
"visible": false,
"variation": true,
"options": [
"Black",
"Green"
]
},
{
"id": 0,
"name": "Size",
"position": 0,
"visible": true,
"variation": true,
"options": [
"S",
"M"
]
}
],
"default_attributes": [],
"variations": [],
"grouped_products": [],
"menu_order": 0,
"meta_data": [],
"_links": {
"self": [
{
"href": "https://example.com/wp-json/wc/v3/products/799"
}
],
"collection": [
{
"href": "https://example.com/wp-json/wc/v3/products"
}
]
}
},
{
"id": 794,
"name": "Rechargeable USB LED Multicolour Bottle Light",
"slug": "premium-quality-19",
"permalink": "https://example.com/product/premium-quality-19/",
"date_created": "2017-03-23T17:01:14",
"date_created_gmt": "2017-03-23T20:01:14",
"date_modified": "2017-03-23T17:01:14",
"date_modified_gmt": "2017-03-23T20:01:14",
"type": "simple",
"status": "publish",
"hasVideo": "false",
"featured": false,
"catalog_visibility": "visible",
"description": "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n",
"short_description": "<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>\n",
"sku": "",
"price": "21.99",
"regular_price": "21.99",
"sale_price": "",
"date_on_sale_from": null,
"date_on_sale_from_gmt": null,
"date_on_sale_to": null,
"date_on_sale_to_gmt": null,
"price_html": "<span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\">$</span>21.99</span>",
"on_sale": false,
"purchasable": true,
"total_sales": 0,
"virtual": false,
"downloadable": false,
"downloads": [],
"download_limit": -1,
"download_expiry": -1,
"external_url": "",
"button_text": "",
"tax_status": "taxable",
"tax_class": "",
"manage_stock": false,
"stock_quantity": null,
"stock_status": "instock",
"backorders": "no",
"backorders_allowed": false,
"backordered": false,
"sold_individually": false,
"weight": "",
"dimensions": {
"length": "",
"width": "",
"height": ""
},
"shipping_required": true,
"shipping_taxable": true,
"shipping_class": "",
"shipping_class_id": 0,
"reviews_allowed": true,
"average_rating": "0.00",
"rating_count": 0,
"related_ids": [
463,
47,
31,
387,
458
],
"upsell_ids": [],
"cross_sell_ids": [],
"parent_id": 0,
"purchase_note": "",
"categories": [
{
"id": 9,
"name": "Clothing",
"slug": "clothing"
},
{
"id": 14,
"name": "T-shirts",
"slug": "t-shirts"
}
],
"tags": [],
"videos": [],
"images": [
{
"id": 792,
"date_created": "2017-03-23T14:01:13",
"date_created_gmt": "2017-03-23T20:01:13",
"date_modified": "2017-03-23T14:01:13",
"date_modified_gmt": "2017-03-23T20:01:13",
"src": "https://thefancy-media-ec5.thefancy.com/1280/20181119/1822259252425655129_8b155f29f88e.jpg",
"name": "",
"alt": ""
},
{
"id": 793,
"date_created": "2017-03-23T14:01:14",
"date_created_gmt": "2017-03-23T20:01:14",
"date_modified": "2017-03-23T14:01:14",
"date_modified_gmt": "2017-03-23T20:01:14",
"src": "https://example.com/wp-content/uploads/2017/03/T_2_back-2.jpg",
"name": "",
"alt": ""
}
],
"attributes": [],
"default_attributes": [
{
"id": 6,
"name": "Color",
"option": "black"
},
{
"id": 0,
"name": "Size",
"option": "S"
}
],
"variations": [],
"grouped_products": [],
"menu_order": 0,
"meta_data": [],
"_links": {
"self": [
{
"href": "https://example.com/wp-json/wc/v3/products/794"
}
],
"collection": [
{
"href": "https://example.com/wp-json/wc/v3/products"
}
]
}
}
]