React Native中数组filter仅首次生效问题排查求助

问题根源 #

你代码里的核心问题是筛选时没有基于原始数据源exercisesList操作，而是使用了已经被修改过的items状态：

• 第一次筛选时，items是完整的原始列表，能得到正确结果；
• 筛选完成后items被更新为过滤后的子集，后续再筛选时，是从这个子集里查找匹配项，自然找不到其他分类的内容，导致结果为空。

修复后的代码 #

import { exercisesList } from '-utils/exercisesList'

const [items, setItems] = useState(exercisesList)

const handleFilter = (treatment = 'All') => {
  console.log('FILTER-TREATMENTE---->', treatment)
  
  if (treatment === 'All') {
    setItems(exercisesList)
  } else {
    // 始终基于原始数据源过滤，而非已修改的items状态
    const filteredList = exercisesList.filter((item) => item.treatment === treatment)
    console.log('filteredList----->', filteredList)
    setItems(filteredList)
  }
}

额外说明 #

如果exercisesList是动态获取的（比如从API请求），建议把原始数据单独存在状态中，避免依赖外部导出的静态数据：

// 示例：动态获取数据的场景
const [originalItems, setOriginalItems] = useState([])
const [items, setItems] = useState([])

// 数据获取完成后，同时初始化原始数据和展示数据
useEffect(() => {
  fetchExercises().then(data => {
    setOriginalItems(data)
    setItems(data)
  })
}, [])

const handleFilter = (treatment = 'All') => {
  if (treatment === 'All') {
    setItems(originalItems)
  } else {
    const filteredList = originalItems.filter(item => item.treatment === treatment)
    setItems(filteredList)
  }
}

内容的提问来源于stack exchange，提问作者Carlos del Ríro Francés