如何将WooCommerce API集成到React项目中？

嘿，看你已经搭好了基础的API配置，应该是在获取数据的环节卡壳了吧？我之前也遇到过类似的情况，给你整理了一套完整的解决方案，帮你顺利拿到商品数据：

先把你的代码补全并优化 #

首先，把你没写完的代码补全，确保请求逻辑完整且符合最佳实践：

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

class Goods extends Component {
  // 初始化WooCommerce API实例，这里要填对自己的商店信息
  WooCommerce = new WooCommerceAPI({
    url: 'https://你的商店域名.com', // 替换成实际的商店地址
    consumerKey: '你的消费者密钥', // 从WooCommerce后台获取
    consumerSecret: '你的消费者秘钥', // 从WooCommerce后台获取
    wpAPI: true,
    version: 'wc/v3' // 推荐用最新的v3版本
  });

  // 初始化状态，管理商品数据、加载状态和错误信息
  state = {
    products: [],
    isLoading: true,
    fetchError: null
  };

  // 组件挂载时发起API请求
  componentDidMount() {
    // 以分页获取商品为例，你可以根据需求修改参数
    this.WooCommerce.get('products', {
      per_page: 12, // 每页展示12个商品，最大不超过100
      page: 1,
      status: 'publish' // 只获取已发布的商品
    })
    .then(res => {
      this.setState({
        products: res.data,
        isLoading: false
      });
    })
    .catch(err => {
      this.setState({
        fetchError: err.message,
        isLoading: false
      });
      // 打印详细错误信息，方便排查
      console.error('API请求失败:', err.response?.data || err);
    });
  }

  render() {
    const { products, isLoading, fetchError } = this.state;

    if (isLoading) return <div className="loading">加载商品中...</div>;
    if (fetchError) return <div className="error">获取商品失败：{fetchError}</div>;

    return (
      <div className="goods-list">
        <h2>商品列表</h2>
        <div className="goods-grid">
          {products.map(product => (
            <div key={product.id} className="goods-item">
              <h3>{product.name}</h3>
              <p className="price">¥{product.price}</p>
              {product.images[0] && (
                <img 
                  src={product.images[0].src} 
                  alt={product.name} 
                  className="goods-image"
                />
              )}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default Goods;

常见坑点排查 #

• 密钥配置错误：一定要从WooCommerce后台（WooCommerce → 设置 → 高级 → REST API）生成新的密钥，权限至少要选“只读”，别把Key和Secret搞混了！
• 跨域CORS问题：如果你的React项目和WooCommerce商店不在同一个域名下，浏览器会拦截请求。可以安装WP CORS插件一键配置，或者在商店主题的functions.php里加这段代码（生产环境记得把*换成你的React域名）：

  add_action('init', 'allow_cors_for_woocommerce');
  function allow_cors_for_woocommerce() {
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: GET, OPTIONS");
    header("Access-Control-Allow-Headers: Content-Type, Authorization");
  }
  

• API版本不匹配：如果你用的是旧版WooCommerce，可能不支持v3版本，可以换成wc/v2试试，但还是推荐升级到最新版WooCommerce用v3。
• 请求参数错误：比如per_page最大只能设100，page必须是正整数，参数名要和文档一致，别写错了！

调试小技巧 #

• 先用Postman或者curl测试API请求，确认后端没问题再查前端代码；
• 在catch里打印err.response.data，WooCommerce会返回详细的错误原因，比如密钥无效、权限不足之类的。

内容的提问来源于stack exchange，提问作者Oleksandr Tatarinov