ReactJS从数据库中按类别动态获取产品

import React from 'react';
import axios from 'axios';

class ProductList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
      category: 'all', // 默认类别
    };
  }

  componentDidMount() {
    this.fetchProducts(this.state.category);
  }

  fetchProducts = (category) => {
    axios.get(`/api/products?category=${category}`)
      .then(response => {
        this.setState({ products: response.data });
      })
      .catch(error => {
        console.error('Error fetching products:', error);
      });
  }

  handleCategoryChange = (event) => {
    const category = event.target.value;
    this.setState({ category }, () => {
      this.fetchProducts(category);
    });
  }

  render() {
    return (
      <div>
        <select onChange={this.handleCategoryChange}>
          <option value="all">All Categories</option>
          <option value="electronics">Electronics</option>
          <option value="clothing">Clothing</option>
          {/* 其他类别 */}
        </select>
        <ul>
          {this.state.products.map(product => (
            <li key={product.id}>{product.name} - {product.category}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default ProductList;