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

【问题标题】：filter array doesn't work in React component过滤器数组在 React 组件中不起作用
【发布时间】：2021-11-14 06:57:13
【问题描述】：

我想对衣服的尺码进行排序，但是当我点击选择尺码时，无论我选择什么，它都保持“全部”...我的功能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

【问题讨论】：

标签： reactjs filter

【解决方案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
      )
    });
  }
};

【讨论】：