求讲解React中useEffect结合Object.entries实现商品筛选的代码逻辑

代码逐行拆解 #

useEffect(() => {
  cat &&
    setFilteredProducts(
      products.filter((item) =>
        Object.entries(filters).every(([key, value]) =>
          item[key].includes(value)
        )
      )
    );
}, [products, cat, filters]);

核心逻辑逐段说明 #

你已经明确cat &&的短路作用，我们直接从后面的状态更新逻辑讲起：

• 首先是setFilteredProducts(...)：这是React的状态更新函数，作用是将过滤完成的商品列表赋值给filteredProducts状态，触发对应视图更新。
• 外层的products.filter(...)：filter是JS原生数组遍历方法，会逐个判断products数组里的每一个商品item是否符合过滤规则，最终返回所有符合规则的商品组成的新数组。
• 中间的Object.entries(filters)：这个方法会把你定义的过滤条件对象filters转换成二维数组，比如你的filters是{颜色: "红色", 尺码: "XL"}，转换后就会变成[["颜色", "红色"], ["尺码", "XL"]]，方便遍历所有过滤规则。
• 内层的.every(([key, value]) => item[key].includes(value))：
  • every也是JS原生数组方法，特点是只有数组内所有元素都满足回调条件时才返回true，只要有一个不满足就返回false，完美对应「所有过滤条件都要满足」的需求。
  • 这里用了解构赋值，把Object.entries返回的二维数组每一项拆成key（过滤条件的字段名，比如上面例子的「颜色」「尺码」）和value（过滤条件的对应值，比如「红色」「XL」）。
  • item[key].includes(value)就是取当前商品对应字段的取值，判断是否包含我们要过滤的目标值：比如当前商品的「颜色」字段取值是["红色", "黑色"]，要过滤的value是「红色」，这个判断就返回true。

完整流程示例 #

举个实际场景方便理解：
假设filters = {颜色: "红色", 尺码: "XL"}，现有两个商品：

1. 商品A：颜色字段值为["红色", "蓝色"]，尺码字段值为["L", "XL"]
2. 商品B：颜色字段值为["红色", "白色"]，尺码字段值为["M", "L"]
   运行逻辑：

• 检查商品A：颜色包含红色（true）、尺码包含XL（true），所有条件都满足，every返回true，商品A被保留
• 检查商品B：颜色包含红色（true）、尺码不包含XL（false），有一个条件不满足，every返回false，商品B被过滤
  最终filteredProducts里只会保留商品A。

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