Question

取消选择值时 Reactjs 过滤不起作用

2022-07-25

163

reactjs material-ui

我正在使用 React MUI 中的 ToggleButtonGroup 。当用户单击切换按钮时，我比较了 stbNumber 值中的首字母并过滤出数组。当我选择切换按钮时，过滤功能有效，但当我取消选择切换按钮时，过滤功能无效。如果我遗漏了什么，请帮助我。

const [filteredData, setFilteredData]: any = useState([]);
const [filterNumbers, setFilterNumbers]: any = useState([]);

useEffect(() => {
  const filtered: any = channels.filter(({ stbNumber }: any) => {
    return filterNumbers.includes(stbNumber[0]);
  })

  if (filterNumbers.length > 0) {
    setFilteredData(filtered)
  }

}, [channels, filterNumbers])

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

return (
<>
 <ToggleButtonGroup value={setFilterNumbers} onChange={handleFilterNumbers} sx={{ display: 'flex', flexWrap: 'wrap' }}>
   <ToggleButton value="1">100 - 199</ToggleButton>
   <ToggleButton value="2">200 - 299</ToggleButton>
 </ToggleButtonGroup>
  <ChannelList content={filteredData} />
</>
)

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

示例图像：

Answer 1

关键问题是您需要处理 if(filterNumbers.length > 0) 的 else 情况。这将确保在取消选择过滤器时删除所有数据：

if (filterNumbers.length > 0) {
  setFilteredData(filtered);
} else {
  setFilteredData([]);
}

此外，我 强烈建议 进行以下更改：

正确的 TypeScripting：

type Channel = {
  name: string;
  stbNumber: string;
};

// Inside your component
const [filteredData, setFilteredData] = useState<Channel[]>([]);
const [filterNumbers, setFilterNumbers] = useState<string[]>([]);

从 useEffect() 中删除不必要的依赖项，因为改变它们 不会重新渲染 组件。这些被称为外部范围值，它们不是有效的依赖项。

  useEffect(() => {
    const filtered = channels.filter(({ stbNumber }) => {
      return filterNumbers.includes(stbNumber[0]);
    });

    if (filterNumbers.length > 0) {
      setFilteredData(filtered);
    } else {
      setFilteredData([]);
    }
  }, [filterNumbers]);  // 'channels' removed

在您的示例中， ToggleButtonGroup 没有有效值。我假设您的意思是：

    <ToggleButtonGroup
      value={filterNumbers} // instead of value={setFilterNumbers}

您的最终组件将如下所示：

function MyComponent() {
  const [filteredData, setFilteredData] = useState<Channel[]>([]);
  const [filterNumbers, setFilterNumbers] = useState<string[]>([]);

  useEffect(() => {
    const filtered = channels.filter(({ stbNumber }) => {
      return filterNumbers.includes(stbNumber[0]);
    });

    if (filterNumbers.length > 0) {
      setFilteredData(filtered);
    } else {
      setFilteredData([]);
    }
  }, [filterNumbers]);

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

  return (
    <>
      <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} />
    </>
  );
}