如何在转换State的useEffect外更新useState状态并解决useContext传递问题

你的问题核心是直接修改了React state的引用类型数据，且未正确使用setSelection触发状态更新。React的state遵循不可变原则，必须通过创建新的数组/对象副本并调用更新函数，才能让Provider感知到状态变化。

错误根源 #

1. 原地修改state：你使用selection.push()、splice()等方法直接修改原数组，这属于原地修改引用类型，React无法检测到state的变化，因此Provider接收不到更新。
2. 无效的更新触发：最后额外添加的useEffect完全多余，且由于传入的是原引用的selection，setSelection会直接忽略这个更新请求。

修正方案 #

每次更新selection时，都基于原数组创建新的副本，再调用setSelection传入新副本。同时去掉多余的useEffect，直接在逻辑中完成状态更新。

修改后的完整代码：

import '../styles/Filters.css'
import React, { useState, useContext, useEffect } from 'react'
import { SelectionContext } from '../App'
import Budget from '../components/Budget'

export default function Filters() {
    const [filters, setFilters] = useState({})
    const [minValue2, setMinValue2] = useState(0)
    const [maxValue2, setMaxValue2] = useState(0)

    // 用const声明，无需重新赋值变量
    const [selection, setSelection] = useContext(SelectionContext)

    useEffect(() => {
        const filterKey = Object.keys(filters)[0]
        if (!filterKey) return
        
        const filterValue = Object.values(filters)[0]
        if (Object.keys(filterValue)[0] !== '0') return

        // 查找是否已存在该类型的选项
        const existingIndex = selection.findIndex(obj => filterKey in obj)
        
        if (existingIndex === -1) {
            // 新增类型选项
            setSelection([
                ...selection,
                { [filterKey]: [filterValue] }
            ])
        } else {
            const existingValues = selection[existingIndex][filterKey]
            const valueExists = existingValues.includes(filterValue)
            
            if (!valueExists) {
                // 新增该类型下的选项
                const newSelection = [...selection]
                const updatedItem = {
                    ...newSelection[existingIndex],
                    [filterKey]: [...existingValues, filterValue]
                }
                newSelection[existingIndex] = updatedItem
                setSelection(newSelection)
            } else {
                // 删除该类型下的选项
                const newSelection = [...selection]
                const updatedValues = existingValues.filter(val => val !== filterValue)
                
                if (updatedValues.length === 0) {
                    // 该类型无剩余选项，删除整个类型对象
                    newSelection.splice(existingIndex, 1)
                } else {
                    // 更新该类型的选项列表
                    const updatedItem = {
                        ...newSelection[existingIndex],
                        [filterKey]: updatedValues
                    }
                    newSelection[existingIndex] = updatedItem
                }
                
                setSelection(newSelection)
            }
        }
    }, [filters, selection, setSelection])

    console.log(selection)

    return (
        <>
            <Budget
                setMinValue2={setMinValue2}
                setMaxValue2={setMaxValue2}
                setFilters={setFilters}
            />
        </>
    )
}

关键修改点 #

• 用const声明从useContext获取的selection和setSelection，避免不必要的变量重新赋值
• 所有对selection的修改都创建新的数组/对象副本，确保引用变化以触发React更新
• 直接在useEffect中调用setSelection完成状态更新，移除多余的触发逻辑
• 提取filterKey和filterValue变量，简化代码结构并提升可读性

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