如何从WooCommerce API提取产品数据到我的React Native应用中

时间:2018-09-25 02:45:12

标签: react-native woocommerce

我是要回应本地人的新闻。我已经建立了一个本地WordPress + WooCommerce网站,并且试图获取我的React Native应用程序的产品详细信息exp:价格,名称等。我已经安装了“ woocommerce-api”软件包。我可以从“ http://localhost:8888/foodSite/wp-json/wp/v2/product”中获取一些产品详细信息,但不能从“ http://localhost:8888/foodSite/wp-json/wc/v2/products”中获取详细信息。有人可以指出我的问题吗?

import React, {Component} from 'react';
import {FlatList, StyleSheet, Text, View} from 'react-native';
import WooCommerceAPI from 'woocommerce-api';
const WooCommerce = new WooCommerceAPI({
                                   url: 'http://localhost:8888/foodSite/',
                                   consumerKey: 'ck_xxxxxx',
                                   consumerSecret: 'cs_xxxxx',
                                   wpAPI: true,
                                   version: 'wc/v2'
                                   });

export default class App extends Component<Props> {

state={
data:[]
}



fetchData = async()=>{
const response = await
fetch('http://localhost:8888/foodSite/wp-json/wp/v2/product?per_page=100');

const posts = await response.json();

this.setState({data:posts});
}

componentDidMount(){
this.fetchData();
}



render() {
return (
        <View style={styles.container}>
        <Text>Product</Text>

        <FlatList
        data={this.state.data}
        keyExtractor={(x,i)=>i}
        renderItem={({item})=>
        <View style={styles.postColumn}>
        <Text style={{fontSize:18,fontWeight:'bold'}}>{item.id}</Text>
        <Text style={{fontSize:18,fontWeight:'bold'}}>{WooCommerce.get('products').name}</Text>
        </View>
        }
        />
        </View>
        );
}
}

const styles = StyleSheet.create({
  container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',[enter image description here][1]
 marginTop:40,
  },

});

1 个答案:

答案 0 :(得分:2)

您的网址是错误的,如下进行了更改。 wp更改为wcproduct更改为products

 http://localhost:8888/foodSite/wp-json/wc/v2/products?per_page=100

文档网址:WoocommerceRestApi