开发井字棋游戏时api文件报store.game._id未定义错误
错误核心成因
报错store.game._id未定义的本质原因是:全局store对象下的game属性从未被成功赋值,拼接接口请求路径时,链式读取undefined的_id属性直接触发报错。
代码中存在的具体问题
- 创建游戏的状态同步逻辑缺失:在
onCreateGame中调用api.createGame()拿到接口响应后,仅绑定了UI更新的回调,没有执行核心赋值操作——将接口返回的、带_id字段的游戏实例写入store.game。同类标准实现中,这一步是创建游戏接口成功后的必做操作,缺失后store中永远不存在有效的game对象。 - 函数形参与内部依赖不匹配:
onUpdateGame定义的形参为(index, player, over),但函数内部直接调用event.preventDefault()、读取event.target,却从未将event作为参数传入,会导致函数执行一开始就抛出引用错误,连带后续所有逻辑中断。 - 无前置状态拦截:用户如果没有先触发“创建游戏”流程(即createGame接口还未返回、
store.game还未初始化),直接点击棋盘落子,就会在store.game为空的状态下直接调用updateGame接口,自然读不到_id字段。 - 玩家轮转逻辑缺陷:在updateGame的成功回调里,使用两个独立的if分支判断玩家值,逻辑上第一个if把X渲染完成后立刻将player改成O,第二个if会立即命中,导致格子内容被连续覆盖,同时传给接口的value值也会完全错乱。
排查与修复步骤
- 首先检查createGame接口的成功回调链路:拿到接口响应后先打印响应结构,确认存在带
_id的game字段,立刻执行store.game = 响应中的game对象,通过日志验证console.log(store.game._id)可以正常输出id值。 - 修正
onUpdateGame的函数签名,将event加入形参列表,保证内部调用event相关方法时不会抛出引用错误。 - 在调用
api.updateGame的最开头加前置判断:如果!store.game,直接给用户提示“请先创建游戏再开始落子”,拦截无效请求。 - 将玩家轮转的两个独立if判断改为if-else结构,避免连续判断导致的渲染异常。
内容的提问来源于stack exchange,提问作者conniepanz
相关产品推荐
相关产品推荐

