Question

我想通过API在React上接收我的网站上的数据。我按照文档中的说明执行了所有操作，执行了npm install --save woocommerce-api的安装，创建了带有参数的对象，如文档http://woocommerce.github.io/woocommerce-rest-api-docs/?javascript#pagination中所示

import React, { Component } from 'react';
import '../App.css';
import WooCommerceAPI from 'woocommerce-api';


class Goods extends Component {
    WooCommerce = new WooCommerceAPI({
    url: 'http://portland.com/wp/', // Your store URL
    consumerKey: '**KEY**', // Your consumer key
    consumerSecret: '**KEY**', // Your consumer secret
    wpAPI: true, // Enable the WP REST API integration
    version: 'wc/v2' // WooCommerce WP REST API version
  });
    render() {
        return(
        <div className="GoodsMain">
            <div className="Goods">
            <img src="/images/photo.png" alt="appletv"/><br/>
            <div className="TextAlign">
            <span className="NameOfGood">{WooCommerce.get('products/1').name}</span><br/>
            <span className="StyleOfGood">black</span><br/>
            <span className="PriceOfGood">$49.99</span>
            </div>
            </div>

        </div>

        );
    }
}

export default Goods;

但是我得到了Line 20: 'WooCommerce' is not defined no-undef 你能帮我在我的网站上正确整合API吗？

Answer 1

我认为您必须使用oauth身份验证才能从woo-commerce rest api获取数据，因为您的wordpress位于没有ssl证书的服务器上。

Answer 2

尝试这种方式：

1）。使用axios库（https://alligator.io/react/axios-react/）调用WooCommerce Rest API。

2）。为了简化身份验证过程，请确保在您的Wordpress主机上启用了SSL（我尝试在非SSL上进行身份验证，与SSL相比，它似乎并不那么容易。）

3）。按照此链接中的步骤生成WooCommerce Rest API密钥 https://woocommerce.github.io/woocommerce-rest-api-docs/?javascript#authentication

4）。一切设置完成后，使用邮递员（https://www.getpostman.com/）测试检索产品列表。

[GET]
https://{{host}}/{{wordpressFolder}}/wp-json/wc/v2/products/

[HEADER] 
// Inside your React code, do this:
const basicToken = btoa(PRODUCTS_CONSUMER_KEY+':'+PRODUCTS_CONSUMER_SECRET)

Authorization: Basic ${basicToken}

如何将WooComerceAPI集成到React中？

2 个答案: