腾讯云 CodeBuddy 赋能新零售前端开发：全新功能实战体验

import React, { useState, useEffect } from 'react';
import './ProductList.css';

const ProductList = () => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const [searchTerm, setSearchTerm] = useState('');

  const itemsPerPage = 10;

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        setLoading(true);
        // 这里需要替换为实际的API端点
        const response = await fetch(`https://api.example.com/products?page=${currentPage}&limit=${itemsPerPage}`);
        const data = await response.json();
        setProducts(data.items);
        setTotalPages(Math.ceil(data.total / itemsPerPage));
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, [currentPage]);

  const handleSearch = e => {
    setSearchTerm(e.target.value);
  };

  const filteredProducts = products.filter(product => product.name.toLowerCase().includes(searchTerm.toLowerCase()));

  const handlePageChange = newPage => {
    setCurrentPage(newPage);
  };

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div className='product-list'>
      <h2>Product List</h2>
      <div className='search-box'>
        <input type='text' placeholder='Search products...' value={searchTerm} onChange={handleSearch} />
      </div>
      <div className='products'>
        {filteredProducts.map(product => (
          <div key={product.id} className='product-item'>
            <h3>{product.name}</h3>
            <p>Price: ${product.price}</p>
          </div>
        ))}
      </div>
      <div className='pagination'>
        {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
          <button key={page} onClick={() => handlePageChange(page)} disabled={page === currentPage}>
            {page}
          </button>
        ))}
      </div>
    </div>
  );
};

export default ProductList;

import { useEffect, useState } from 'react';

/**
 * 防抖Hook
 * @param {any} value - 需要防抖的值
 * @param {number} delay - 延迟时间(毫秒)
 * @returns {any} 防抖后的值
 */
export default function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

1. 错误边界处理
- 创建ErrorBoundary组件
- 包裹可能出错的部分

2. 分页组件抽离
- 创建Pagination组件
- 提高代码复用性

3. API服务抽象
- 创建apiService模块
- 统一管理请求逻辑

4. 类型检查
- 添加PropTypes定义
- 增强代码可靠性