React MUI ToggleButtonGroup取消选择时过滤功能失效求助

问题场景 #

使用React MUI的ToggleButtonGroup组件，点击切换按钮时通过stbNumber首字母过滤频道数组，选择按钮时过滤正常，但取消所有选择后过滤功能失效，数据无法恢复为完整列表。

错误原因 #

1. ToggleButtonGroup的value属性绑定错误：代码里把状态更新函数setFilterNumbers传给了value，而非状态变量filterNumbers，导致组件无法正确跟踪选中状态。
2. 过滤逻辑未处理空选择情况：useEffect中仅当filterNumbers长度大于0时更新filteredData，取消所有选择时不会重置数据，导致页面仍显示之前的过滤结果。

修复后的完整代码 #

import { useState, useEffect } from 'react';
import { ToggleButtonGroup, ToggleButton } from '@mui/material';

// 定义频道类型，替换any提升类型安全
type Channel = {
  name: string;
  stbNumber: string;
};

const channels: Channel[] = [
  { name: "tv1", stbNumber: "101"},
  { name: "tv2", stbNumber: "102"},
  { name: "tv3", stbNumber: "201"},
  { name: "tv4", stbNumber: "202"},
  { name: "tv5", stbNumber: "300"},
];

export default function ChannelFilter() {
  // 明确状态类型，避免any
  const [filteredData, setFilteredData] = useState<Channel[]>(channels);
  const [filterNumbers, setFilterNumbers] = useState<string[]>([]);

  useEffect(() => {
    let filtered: Channel[];
    if (filterNumbers.length > 0) {
      filtered = channels.filter(({ stbNumber }) => {
        return filterNumbers.includes(stbNumber[0]);
      });
    } else {
      // 取消所有选择时，重置为完整频道列表
      filtered = [...channels];
    }
    setFilteredData(filtered);
  }, [channels, filterNumbers]);

  const handleFilterNumbers = (event: React.MouseEvent<HTMLElement>, channelNumbers: string[]) => {
    setFilterNumbers(channelNumbers);
  };

  return (
    <>
      {/* 修正value属性为filterNumbers */}
      <ToggleButtonGroup 
        value={filterNumbers} 
        onChange={handleFilterNumbers} 
        sx={{ display: 'flex', flexWrap: 'wrap' }}
      >
        <ToggleButton value="1">100 - 199</ToggleButton>
        <ToggleButton value="2">200 - 299</ToggleButton>
      </ToggleButtonGroup>
      <ChannelList content={filteredData} />
    </>
  );
}

// 假设ChannelList组件定义如下
function ChannelList({ content }: { content: Channel[] }) {
  return (
    <div>
      {content.map(channel => (
        <div key={channel.stbNumber}>{channel.name} ({channel.stbNumber})</div>
      ))}
    </div>
  );
}

关键修改点说明 #

• 修正ToggleButtonGroup的value绑定：将value={setFilterNumbers}改为value={filterNumbers}，让组件正确同步选中状态。
• 完善过滤逻辑：在useEffect中添加filterNumbers为空的分支，直接将完整频道列表赋值给filteredData，确保取消选择后数据恢复。
• 添加类型定义：替换any为明确的Channel类型，提升代码可维护性和类型安全。

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