Javascript 过滤反应

你好

我有点小问题。我想按大小过滤我的产品，但不知怎的，这些产品无法过滤。当I

console.log

产品时，会出现：

[]
[]

filter.js:24 (5) [{…}, {…}, {…}, {…}, {…}]
filter.js:24 (5) [{…}, {…}, {…}, {…}, {…}]

产品阵列记录了4次，两次为空，然后记录了两次产品。 我已经检查了是否有

console.logged

之前的数组，但是我没有看到任何东西。我期待着你的答复

我的过滤器代码：

import React, { useEffect } from 'react';
import { listProduct } from '../../actions/productActions';
import { useDispatch, useSelector } from 'react-redux';

const Filter = () => {
  const productList = useSelector((state) => state.productList);

  const { products, loading, error } = productList;
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(listProduct());
  }, []);
  console.log(products);

  return (
    <div className="filter">
      <label>
        Order:
        <select>
          <option value="lowest">Lowest to Highest</option>
          <option value="highest">Highest to Lowest</option>
        </select>
      </label>
      <label>
        Size:
        <select
          className="size"
          onChange={(e) => {
            if (e.target.value === 'S') {
              return products.filter((product) => product.size === 'S');
            } else if (e.target.value === 'XS') {
              alert('Extra small');
            } else if (e.target.value === 'M') {
              alert('MEDIUM');
            } else if (e.target.value === 'L') {
              alert('LARGE');
            } else if (e.target.value === 'XL') {
              alert('EXTRA LARGE');
            } else {
              alert('ALL');
            }
          }}
        >
          <option value="">ALL</option>
          <option value="XS">XS</option>
          <option value="S">S</option>
          <option value="M">M</option>
          <option value="L">L</option>
          <option value="XL">XL</option>
        </select>
      </label>
    </div>
  );
};

export default Filter;

import React，{useffect}来自“React”；
从“../../actions/productActions”导入{listProduct}；
从'react redux'导入{useDispatch，useSelector}；
常量过滤器=（）=>{
const productList=useSelector（（state）=>state.productList）；
const{products，loading，error}=productList；
const dispatch=usedpatch（）；
useffect（（）=>{
调度（listProduct（））；
}, []);
控制台日志（产品）；
返回(
订单：
从最低到最高
从高到低
尺寸：
{
如果（e.target.value=='S'）{
返回products.filter（（product）=>product.size=='S'）；
}否则如果（e.target.value=='XS'）{
警报（“超小”）；
}否则如果（e.target.value=='M'）{
警惕（“中等”）；
}else if（e.target.value=='L'）{
警报（“大”）；
}否则如果（e.target.value=='XL'）{
警报（“超大”）；
}否则{
警报（“全部”）；
}
}}
>
全部的
XS
s
M
L
特大号
);
};
导出默认过滤器；

您的过滤器无法按预期方式工作，因为它不会改变原始数组。从：

filter（）方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素

---

我想您必须将过滤器功能移动到渲染

productList

的位置，每次重新渲染至少会对其进行一次控制台记录。@Elanochecer如何解决此问题？出现两个空数组是因为在第一次渲染中，数组未加载，因此为空。那么

onChange

处理程序中的过滤器不起作用了？我觉得不错。@Gh05d但是过滤器不太好用，数组的元素有size属性吗？