React Select如何传递选中值给过滤函数实现NFT分类筛选

你的代码存在两处核心问题，按以下修改即可完成分类筛选功能：

• 事件绑定错误：该Select组件（react-select）不通过onClick返回选中值，需要使用官方提供的onChange回调，用户切换选项时，选中的选项对象会作为参数传入回调。你当前写法onClick={filterCategory({options})}会在组件渲染阶段直接执行函数，无法响应用户的选择操作。
• 判断值不匹配：过滤函数中判断全类目用的判断条件是cat !== "all"，但你原有options配置里全类目的value为'All categories'，二者不匹配会导致全类目筛选逻辑失效。

具体修改代码 #

1. 先调整options配置，对齐过滤函数的判断逻辑：

const options = [
  { value: 'all', label: 'All categories' },
  { value: 'Basic', label: 'Basic' },
  { value: 'Premium', label: 'Premium' },
]

2. 修改Select组件的事件绑定，通过onChange拿到选中值后传入过滤函数：

<div className='dropdownSelect one'>
  <Select 
    className='select1' 
    styles={customStyles} 
    menuContainerStyle={{'zIndex': 999}} 
    defaultValue={options[0]} 
    options={options} 
    onChange={(selected) => filterCategory(selected.value)}
  />
</div>

3. 可选补充：defaultValue仅控制组件初始显示的选项，不会自动触发过滤逻辑，如果需要页面首次加载就默认渲染全类目结果，在组件挂载时调用一次过滤函数即可：

import { useEffect } from 'react'

// 组件初始化时执行全类目过滤
useEffect(() => {
  filterCategory('all')
}, [])

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