React Native状态已变更，但JSX条件渲染未更新UI问题求助

核心原因：状态更新时未创建新数组引用 #

你在removeFilter和addFilter函数中直接修改了原状态数组的引用，导致React无法检测到状态变化，进而不触发组件重渲染：

• let temparr = filterList只是将原状态数组的引用赋值给临时变量，后续的splice、push操作本质是修改原状态数组本身
• React通过对比状态的引用变化来判断是否需要更新UI，当你把同一个数组引用传给setFilterList时，React会判定状态未改变，因此不会重新渲染组件，UI自然无法同步更新

修正代码示例 #

修复removeFilter函数

const removeFilter = useCallback((cat) => {
    // 通过扩展运算符创建原数组的浅拷贝，避免修改原状态
    let temparr = [...filterList];
    const index = temparr.indexOf(cat);
    if (index > -1) {
        temparr.splice(index, 1);
    }
    setFilterList(temparr);
}, [filterList])

修复addFilter函数

const addFilter = useCallback((cat) => {
    // 直接创建包含新元素的新数组，无需临时变量
    setFilterList([...filterList, cat]);
}, [filterList])

补充说明 #

你在onPress中直接console.log(filterList)会打印旧状态值，因为React的状态更新是异步的。如果需要查看更新后的状态，可以通过useEffect监听filterList的变化：

useEffect(() => {
    console.log('更新后的筛选列表:', filterList);
}, [filterList])

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