React组件filter筛选功能失效，选择尺码后始终显示All如何解决？

云上老周

2026-9-26

问题根因

你遇到的筛选状态始终停留在「All」的问题，不是filterProducts函数的问题，是你写的Filter组件里尺码下拉框的配置错误导致的：
所有尺码对应的<option>标签的value属性都被统一设置成了空字符串""，和「All」选项的value完全一致。不管你选中哪个尺码，下拉框读取到的选中值都是空值，自然会一直匹配到「All」选项，筛选逻辑也无法拿到正确的尺码参数。

修正后的Filter组件代码

你只需要把每个尺码option的value改成对应尺码值即可：

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">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>
      </div>
    </div>
  );
}