ReactJS 如何实现点击分类从数据库动态获取对应商品

以下是可直接落地的实现步骤：

• 第一步：定义所需状态变量
  首先在组件内声明需要用到的状态，存储分类数据、选中分类ID、商品数据、加载和错误状态：

  import { useState, useEffect } from 'react'
  
  function CategoryProductPage() {
    const [categories, setCategories] = useState([]) // 存储提前拉取的全部分类数据
    const [activeCategoryId, setActiveCategoryId] = useState(null) // 当前选中的分类ID
    const [products, setProducts] = useState([]) // 当前分类下的商品列表
    const [loading, setLoading] = useState(false) // 商品请求加载状态
    const [error, setError] = useState('') // 请求错误提示
    // 后续逻辑写在这里
  }
  

• 第二步：正确绑定分类点击事件
  注意React的点击事件属性为驼峰写法onClick，你提到的onclicks拼写错误是常见的功能失效原因。渲染分类菜单时给每个分类绑定点击事件，传入当前分类的ID：

  // 写在组件return内的分类菜单渲染逻辑
  <div className="category-menu">
    {categories.map(category => (
      <button
        key={category.id}
        onClick={() => setActiveCategoryId(category.id)}
        className={activeCategoryId === category.id ? 'category-active' : ''}
      >
        {category.name}
      </button>
    ))}
  </div>
  

• 第三步：监听选中分类变化，拉取对应商品数据
  推荐用useEffect监听选中分类ID的变化，自动触发商品请求，代码耦合度更低：

  // 写在组件内部，和useState同级
  useEffect(() => {
    // 没有选中分类时不发起请求
    if (!activeCategoryId) return
    const fetchProductsByCategory = async () => {
      setLoading(true)
      setError('')
      try {
        // 替换为你的商品接口地址，按接口要求传递分类ID参数
        const response = await fetch(`/api/products?categoryId=${activeCategoryId}`)
        if (!response.ok) throw new Error('商品数据请求失败')
        const result = await response.json()
        setProducts(result)
      } catch (err) {
        setError(err.message)
      } finally {
        setLoading(false)
      }
    }
    fetchProductsByCategory()
  }, [activeCategoryId]) // 依赖为选中分类ID，ID变化时自动重新执行
  

• 第四步：渲染商品列表，处理边界状态
  渲染商品区域时要覆盖加载中、请求错误、空数据等边界场景：

  // 写在组件return内的商品区域渲染逻辑
  <div className="product-list">
    {loading && <p>商品加载中，请稍候...</p>}
    {error && <p className="error-tip">加载失败：{error}</p>}
    {!loading && !error && activeCategoryId && products.length === 0 && (
      <p>该分类下暂无商品</p>
    )}
    {!loading && !error && products.map(product => (
      <div key={product.id} className="product-card">
        <h4>{product.name}</h4>
        <p>价格：¥{product.price}</p>
        <p>{product.desc}</p>
      </div>
    ))}
  </div>
  

可选优化点 #

• 增加缓存逻辑：用对象存储已经请求过的分类商品数据，重复点击同一分类时直接读取缓存，不用重复发起请求
• 增加防抖：如果分类点击切换非常频繁，可以加300ms防抖，避免发起无效请求
• 点击分类时添加选中态样式，提升用户体验

内容的提问来源于stack exchange，提问作者Sem de Wilde