React Hooks组件报games.filter错误且无法渲染从MongoDB获取的游戏数据

问题与观测现状 #

• 已完成MongoDB数据拉取逻辑，React前端控制台可正常输出获取到的游戏相关数据
• 直接对从上下文获取的games变量执行games.filter操作时，触发运行时报错，导致组件无法消费数据，浏览器页面无法正常渲染
• 替换为Object.values(games).filter逻辑后，filter相关报错消失，但页面仍未正常展示数据
• 组件树调试可观测到两个关键现象：
  • 在GamesByCategory组件的作用域内，可正常读到从上下文传入的游戏数据
  • 最终渲染阶段，传入子组件GameBox的数据源为undefined

关联核心业务代码 #

import React, {useState, useRef, useContext} from 'react'
import { useScrollPosition } from '@n8tb1t/use-scroll-position'
import GameBox from '../objects/GameBox'
import  GamesContext  from '../../contexts/GamesContext'

const GamesByCategories = () => {
    const { games, setGames } = useContext(GamesContext)
    const [currentCategory, setCurrentCategory] = useState(0)
    
    const [categories, setCategories] = useState([
        {id: 0, name: 'all', isActive: true},
        {id: 1, name: 'gadgets', isActive: false},
        {id: 2, name: 'sports', isActive: false},
        {id: 3, name: 'family', isActive: false},
    ])

    const categoriesTab = categories.map(category => {
        var active = category.isActive ? 'active' : ''
        return(
            <div key={category.id} onClick={() => filterCategory(category.id)} className={"tab-element " + active } >
                <span>{category.name}</span>
            </div>
        )
    })

    // 按当前分类筛选并渲染游戏列表，问题发生位置
    const gamesList = Object.values(games).filter(game => !game.isVersion )        
        .filter(game => (game.category === (currentCategory) || currentCategory === 0))
         .map(game => {
            return (
             <GameBox id={game.id} image={game.image} name={game.name} price={game.price} isNew={game.gameIsNew} /> 
                )
         }) 

    const filterCategory = (categoryId) => {
        // 更新当前选中的分类状态
        var updatedCategories = categories.map(category => {
            if(category.id === categoryId){
                category.isActive = true
                
            }else{
                category.isActive = false
            }
            return category
        })

        setCurrentCategory(categoryId)
        setCategories(updatedCategories)
    }

    // 实现分类标签吸顶效果逻辑
    const [isCategoriesTabSticky, setIsCategoriesTabSticky] = useState(false)
    const categoriesTabRef = useRef(null)
    const stickyStyles = isCategoriesTabSticky ? "is-sticky" : ""

    useScrollPosition( ({currPos}) =>{
        if(-(currPos.y) >= categoriesTabRef.current.offsetTop){
            setIsCategoriesTabSticky(true)
        }else{
            setIsCategoriesTabSticky(false)
        }
    })

    return (
        <div>
            <div id="game-categories-tab" ref={categoriesTabRef} className={"flex justify-center mt-10 mb-8 custom-tabs " + stickyStyles}>
                <div className="tab-container">
                    <div className="flex">
                        {categoriesTab}
                    </div>
                </div>
            </div>

            <div className="grid justify-center  categories-games">
                <div className="flex flex-wrap justify-center categories-games-container">
                    { gamesList }
                </div> 
            </div>
        </div>
    )
}

export default GamesByCategories;

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