React Native如何实现单按钮切换过滤与清除分类筛选功能

实现方案 #

核心逻辑说明 #

你原来的写法有个核心问题：筛选后直接覆盖了results，原始全量数据会丢失，所以清除筛选的逻辑是无效的。你需要先保留完整的原始数据源，再新增一个状态标记当前是否处于筛选状态，点击按钮时根据当前状态切换执行过滤/恢复操作即可。

具体代码实现 #

1. 新增必要状态（以React Hooks为例）

// 存储不会被筛选修改的原始全量数据，初始化时赋值你的完整数据集
const [originalResults, setOriginalResults] = useState([]);
// 当前页面展示的结果列表
const [results, setResults] = useState([]);
// 标记是否已经开启category=1的筛选
const [isFiltered, setIsFiltered] = useState(false);

2. 合并点击事件逻辑

const onPress = () => {
  if (isFiltered) {
    // 已筛选状态：点击恢复原始全量数据
    setResults(originalResults);
    setIsFiltered(false);
  } else {
    // 未筛选状态：点击过滤出category=1的数据
    const filteredResults = originalResults.filter((result) => {
      return result.category === 1;
    });
    setResults(filteredResults);
    setIsFiltered(true);
  }
};

3. 按钮代码优化（可选，可同步切换按钮文字提示用户）

<Button onPress={onPress}>
  {isFiltered ? '显示全部' : 'Lajme'}
</Button>

补充说明 #

如果你的全量数据来自props、接口缓存等固定来源，不需要额外存originalResults状态，直接用该全量数据源作为过滤和恢复的基准即可。

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