React组件基于查询参数筛选产品：根路由不显示全部产品

问题根源分析 #

1. 查询参数解析错误：根路由时search为空字符串，split("=")[1]返回undefined，经decodeURIComponent处理后变成字符串"undefined"，导致筛选逻辑错误匹配不到产品，最终显示Loading。
2. useEffect依赖缺失：仅监听query变化，但products是异步加载的，初始值可能为undefined，且products更新时不会触发重新计算筛选结果。
3. 初始状态与加载状态混淆：FilteredProducts初始为空数组，无法区分“产品未加载完成”和“无匹配产品”两种情况。

代码修改方案 #

import React, { useContext, useEffect, useState } from "react";
import Product from "./Product";
import { ProductContext } from "../utils/Context";
import Loading from "./Loading";
import { useLocation } from "react-router-dom";

function Main() {
  const { products } = useContext(ProductContext);
  const { search } = useLocation();
  // 改用URLSearchParams正确解析查询参数（假设参数名为category）
  const searchParams = new URLSearchParams(search);
  const query = searchParams.get('category');

  const [filteredProducts, setFilteredProducts] = useState([]);

  useEffect(() => {
    // 产品未加载完成时不执行筛选
    if (!products) return;

    if (query) {
      // 精确匹配类别，避免大小写问题可加toLowerCase()
      setFilteredProducts(
        products.filter(product => product.category === query)
      );
    } else {
      // 无查询参数时显示全部产品
      setFilteredProducts(products);
    }
  }, [query, products]); // 新增products为依赖，确保产品数据更新时重新筛选

  // 区分加载状态和无匹配产品状态
  if (!products) {
    return <Loading />;
  }

  return filteredProducts.length === 0 ? (
    <div className="w-[80%] px-5 py-28 text-center">
      没有找到匹配的产品
    </div>
  ) : (
    <div className="w-[80%] px-5 py-28 overflow-x-hidden overflow-y-auto">
      <div className="flex justify-center gap-4  flex-wrap">
        {filteredProducts.map((product) => (
          <Product key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

export default Main;

关键修改说明 #

• 正确解析查询参数：使用URLSearchParams替代字符串分割，能可靠获取指定参数（比如category），根路由时query会是null，符合预期逻辑。
• 完善useEffect依赖：添加products到依赖数组，确保产品数据加载完成或更新时，自动重新执行筛选逻辑。
• 区分加载与无匹配状态：先判断products是否存在，存在后再检查筛选结果，避免把“产品未加载”和“无匹配产品”混淆，同时给无匹配情况添加友好提示。
• 变量命名规范：将FilteredProducts改为小驼峰filteredProducts，符合React组件的命名习惯。

内容的提问来源于stack exchange，提问作者NOOB The ultimate