如何在同一JSX文件中同时使用空依赖与带状态依赖的useEffect？

你可以直接在同一个JSX组件里同时使用这两个useEffect，React允许单个组件声明多个useEffect钩子，它们会按代码中的声明顺序依次执行，各自处理独立的副作用逻辑。

完整代码示例 #

import { useEffect, useState } from 'react';

const ProductSearchFilter = () => {
  const [selectedRating, setSelectedRating] = useState('');
  const [categories, setCategories] = useState([]);
  const [searchInput, setSearchInput] = useState('');
  const [products, setProducts] = useState([]);

  // 页面加载时获取初始产品数据
  useEffect(() => {
    const fetchInitialProducts = async () => {
      try {
        const response = await fetch('你的产品API地址');
        const data = await response.json();
        setProducts(data);
        // 若需要首次加载就执行筛选，可在此调用applyFilters()
        // applyFilters();
      } catch (error) {
        console.error('加载产品失败:', error);
      }
    };

    fetchInitialProducts();
  }, []);

  // 筛选状态变化时触发筛选逻辑
  useEffect(() => {
    applyFilters();
  }, [selectedRating, categories, searchInput]);

  // 筛选方法示例
  const applyFilters = () => {
    // 基于筛选条件过滤产品的逻辑
    let filteredProducts = [...products];
    
    if (searchInput) {
      filteredProducts = filteredProducts.filter(product => 
        product.name.toLowerCase().includes(searchInput.toLowerCase())
      );
    }

    if (selectedRating) {
      filteredProducts = filteredProducts.filter(product => 
        product.rating >= Number(selectedRating)
      );
    }

    if (categories.length > 0) {
      filteredProducts = filteredProducts.filter(product => 
        categories.includes(product.category)
      );
    }

    setProducts(filteredProducts);
  };

  // 渲染筛选UI与产品列表
  return (
    <div>
      <input 
        type="text" 
        value={searchInput}
        onChange={(e) => setSearchInput(e.target.value)}
        placeholder="搜索产品..."
      />
      {/* 分类选择、评分选择等其他筛选组件 */}
      <div className="product-list">
        {products.map(product => (
          <div key={product.id} className="product-item">
            <h3>{product.name}</h3>
            <p>评分: {product.rating}</p>
            <p>分类: {product.category}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProductSearchFilter;

关键说明 #

• 第一个useEffect依赖数组为空[]，仅在组件首次挂载时执行一次，负责加载初始产品数据。
• 第二个useEffect依赖数组包含selectedRating、categories、searchInput，只要这三个状态任意一个变化，就会自动触发applyFilters执行筛选。
• 如果你的筛选逻辑需要调用API（而非客户端本地过滤），直接把API请求逻辑写在applyFilters里即可，两个useEffect的职责依然清晰：一个拿全量数据，一个拿筛选后的数据。

内容的提问来源于stack exchange，提问作者Ovi Poddar