Question

过滤数组在 React 组件中不起作用

2021-11-14

57

reactjs filter

我想对我的衣服的尺寸进行排序，但是当我单击选择尺寸时，无论我选择什么，它都保持“全部”...我的函数 filterProducts 有什么问题吗？

function Filter(props) {
  return (
    <div className="filter">
      <div className="filter-result">{props.count} Products</div>
      <div className="filter-sort">
        Order
        <select value={props.sort} onChange={props.sortProducts}>
          <option value="latest">Latest</option>
          <option value="lowest">Lowest</option>
          <option value="highest">Highest</option>
        </select>
      </div>
      <div className="filter-size">
        Filter
        <select value={props.size} onChange={props.filterProducts}>
          <option value="">All</option>
          <option value="">XS</option>
          <option value="">S</option>
          <option value="">M</option>
          <option value="">L</option>
          <option value="">XL</option>
          <option value="">XXL</option>
        </select>
      </div>
    </div>
  );
}

我的代码和链接： https://codesandbox.io/s/redux-shop-cart-forked-tlpek?file=/src/App.js

Answer 1

所有尺寸选项都缺少唯一的 value 属性，它们都是 value="" 。

更新 value 属性以匹配您的数据：

Filter
<select value={props.size} onChange={props.filterProducts}>
  <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>
  <option value="XXL">XXL</option>
</select>

您在 App 中的 filterProducts 中也有一个拼写错误，您将状态重置为 product 属性，而不是 products 。这不允许“全部”过滤器值起作用。

filterProducts = (event) => {
  if (event.target.value === "") { // all
    this.setState({
      size: event.target.value,
      products: data.products // <-- reset products!!
    });
  } else {
    this.setState({
      size: event.target.value,
      products: data.products.filter(
        (product) => product.availableSizes.indexOf(event.target.value) >= 0
      )
    });
  }
};