使用UseReducer Hook从对象数组中删除元素的问题排查

核心问题分析 #

• 数据结构不匹配：你的初始状态里data是一个空数组，但 reducer 中却尝试访问state.data.films——数组不存在films属性，这会直接抛出Cannot read properties of undefined (reading 'films')的错误。
• Default 分支错误重置状态：默认分支直接返回全新的初始状态，任何未匹配到 action type 的 dispatch 操作都会清空所有已有数据，导致状态丢失。

修复方案分两种场景 #

场景1：data字段本身就是影片数组

如果你的data直接存储的是影片对象数组，修改 reducer 如下：

const displayReducer=(state,action)=>{
    switch(action.type)
    {
        case 'REMOVE_FILM_FROM_DATA':
            return {
                ...state, 
                data: state.data.filter(item => item._id !== action.filmid)
            }
        // 默认分支返回原状态，不要重置
        default: 
            return state
    }
}

场景2：data是包含films数组的对象

如果你的data应该是一个包含films数组的对象（初始状态定义有误），需要同时修正初始状态和 reducer：

// 修正初始状态
const [displayState, dispatchDisplayState] = useReducer(displayReducer, {
        data: { films: [] }, // 改为包含films数组的对象
        searchResultData: [], 
        display: null
    })

// 修正reducer
const displayReducer=(state,action)=>{
    switch(action.type)
    {
        case 'REMOVE_FILM_FROM_DATA':
            return {
                ...state,
                // 解构原data对象，替换films为过滤后的新数组
                data: {
                    ...state.data,
                    films: state.data.films.filter(item => item._id !== action.filmid)
                }
            }
        default: 
            return state
    }
}

内容的提问来源于stack exchange，提问作者D. Rattansingh