提问者:小点点

如何从WooCommerce API获取产品数据到我的react本机应用程序


我是一个本地人。我已经建立了一个本地主机WordPress WooCommerce网站,我正在尝试获取产品详细信息,例如:价格、名称等到我的react本地应用程序。我已经安装了“WooCommerceAPI”软件包。我可以从“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个答案

匿名用户

您的url错误,请按如下所示进行更改<代码>工作包更改为工作包产品更改为产品

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

文件Url:Woocmercerestapi