React实现Tab切换筛选指定Region对象数组数据的技术问询

问题背景 #

我有一个对象数组，已经通过映射渲染出全部内容，现在需要实现Tab切换筛选功能：点击对应Tab（如'US'、'EU'等）时，只展示匹配对应region的数组元素。以下是我当前的JS逻辑和Tab组件代码，需要完善功能：

const showRegion = () =>  {
  if(selectedTab === 'us') {
    console.log(vendors.data.region)
  }
  if(selectedTab === 'ca') {
    console.log('YOU HIT THE ca TAB')
  }
  if(selectedTab === 'cb') {
    console.log('YOU HIT THE cb TAB')
  }
  if(selectedTab === 'eu') {
    console.log('YOU HIT THE eu TAB')
  }
  if(selectedTab === 'top') {
    console.log('YOU HIT THE top TAB')
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js">

  const [selectedTab, setSelectedTab] = useState(query.get('region') ?? 'all')
  
    <TabUnstyled
                  className={selectedTab === 'all' ? 'active' : ''}
                  value="all"
                  id="All"
                >
                  {width > 500 ? 'All Vendors' : 'All'}
                </TabUnstyled>
                <TabUnstyled
                  className={selectedTab === 'us' ? 'active' : ''}
                  value="us"
                  id="US"
                  
                >
                  {width > 500 ? 'United States Vendors' : 'United States'}
                </TabUnstyled>
                <TabUnstyled
                  className={selectedTab === 'ca' ? 'active' : ''}
                  value="ca"
                  id="CA"
                >
                  {width > 500 ? 'Canada-USD Vendors' : 'Canada-USD'}
                </TabUnstyled>
                <TabUnstyled
                  className={selectedTab === 'cb' ? 'active' : ''}
                  value="cb"
                  id="CB"
                >
                  {width > 500 ? 'Canada-CAD Vendors' : 'Canada-CAD'}
                </TabUnstyled>
                <TabUnstyled
                  className={selectedTab === 'eu' ? 'active' : ''}
                  value="eu"
                  id="EU"
                >
                  {width > 500 ? 'Europe Vendors' : 'Europe'}
                </TabUnstyled>
                <TabUnstyled
                  className={selectedTab === 'top' ? 'active' : ''}
                  value="top"
                  id="topVendorTab"
                >
                  {width > 500 ? 'Top Ocean Vendors' : 'Top Ocean'}
                </TabUnstyled>
</script>

解决方案 #

1. 给Tab添加点击事件，更新选中状态

给每个TabUnstyled组件添加点击事件，点击时调用setSelectedTab更新当前选中的Tab值：

<TabUnstyled
  className={selectedTab === 'all' ? 'active' : ''}
  value="all"
  id="All"
  onClick={() => setSelectedTab('all')}
>
  {width > 500 ? 'All Vendors' : 'All'}
</TabUnstyled>
<TabUnstyled
  className={selectedTab === 'us' ? 'active' : ''}
  value="us"
  id="US"
  onClick={() => setSelectedTab('us')}
>
  {width > 500 ? 'United States Vendors' : 'United States'}
</TabUnstyled>
// 其余Tab组件同理，依次添加onClick事件

2. 编写筛选逻辑，过滤数组

替换原来的showRegion函数，改成返回过滤后数组的逻辑，根据selectedTab的值筛选：

const filteredVendors = () => {
  // 选中'all'时返回全部数据
  if (selectedTab === 'all') {
    return vendors.data;
  }
  // 'top'标签单独处理，假设筛选isTop为true的供应商
  if (selectedTab === 'top') {
    return vendors.data.filter(vendor => vendor.isTop);
  }
  // 其他region标签匹配对应字段
  return vendors.data.filter(vendor => vendor.region === selectedTab);
};

3. 使用过滤后的数组渲染内容

在渲染供应商列表的位置，用filteredVendors()替代原数组进行映射：

{filteredVendors().map(vendor => (
  // 这里是你的供应商卡片/列表项渲染逻辑
  <div key={vendor.id}>{vendor.name}</div>
))}

完整优化后的逻辑示例

const [selectedTab, setSelectedTab] = useState(query.get('region') ?? 'all');

const filteredVendors = () => {
  if (selectedTab === 'all') return vendors.data;
  if (selectedTab === 'top') return vendors.data.filter(v => v.isTop);
  return vendors.data.filter(v => v.region === selectedTab);
};

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