React Native中如何正确过滤数组并更新对应state？

问题根因 #

• 核心错误是filter方法的回调中错误使用了赋值运算符=，而非全等比较运算符===：
  • 单等号=会直接修改原数组中每个job对象的status属性（JS中对象是引用类型，修改会直接作用到原引用对应的对象上），这就是你观察到原数组所有项被改为过滤条件值的原因
  • 同时赋值表达式的返回值是赋值后的值，只要item.label不是假值，filter会保留所有数组项，完全没有起到过滤效果
• 额外隐患：你给jobs、filteredJobs的初始值是undefined，接口返回前如果触发筛选逻辑，调用undefined.filter()会直接抛出报错

修正方案 #

1. 调整state初始值 #

// 初始值设为空数组，避免调用数组方法时报错
const [jobs, setJobs] = useState([])
const [filteredJobs, setFilteredJobs] = useState([])
const [status, setStatus] = useState()

2. 修改筛选逻辑的比较运算符 #

把filter回调里的=改成===，同时增加数组存在性判断增强鲁棒性：

const handleStatusChange = (item) => {
    // 先判断jobs存在且为数组，避免接口返回前调用报错
    const filtered = Array.isArray(jobs) ? jobs.filter(job => job.status === item.label) : []
    setFilteredJobs(filtered)
    setStatus(item)
}

可选优化：支持清空筛选 #

如果需要支持用户取消筛选显示全部数据，可以加个判断，比如选中的是「全部」选项时把filteredJobs设为空，FlatList就会自动回退到显示原jobs数组：

const handleStatusChange = (item) => {
    // 假设你给statuses选项里加了label为"全部"、value为"all"的重置选项
    if(item.value === 'all') {
        setFilteredJobs([])
        setStatus(null)
        return
    }
    const filtered = Array.isArray(jobs) ? jobs.filter(job => job.status === item.label) : []
    setFilteredJobs(filtered)
    setStatus(item)
}

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