在Vuejs / Java应用程序中选择未定义的对象数组中的特定对象

Posted 2023-02-22

【中文标题】在Vuejs / Java应用程序中选择未定义的对象数组中的特定对象

【英文标题】：Selecting specific object inside array of objects throwing undefined in Vuejs /Java app

【发布时间】：2020-10-30 07:21:46

【问题描述】：

在我正在构建的这个应用程序中，我在通过 id 将 SPA 寻址到所选项目时遇到了一个小问题。 将我的数据获取到我的终点（动作），我得到了一个对象数组，然后通过一个 getter，我只获取所有这些数据，并使用函数 find() 我过滤所有数组，将包含 id 引用的对象扔到选择一个。让我们说：

首先- 在路由器上公开链接和标识要选择的对象的 id 条件

    path: '/game/selected/:gameCrabId',
    name: 'GameSelectedView',
    props:true,
    component: GameSelectedView,
    
  ,

第二-E暴露在我通过路由器链接访问的组件中包含请求的id的假定对象

<v-btn router-link :to="`/game/selected/$game.game_id`" >Access</v-btn>

第三次初始化假定选定对象的一般视图

<template>
  <v-container v-if="allGames">
    <!-- <div>gameSelected</div> -->
  </v-container>
</template>

<script>
import  mapActions, mapGetters, mapState  from "vuex";
export default 
  name: "GameSelectedview",
  props: ["gameCrabId"],
  data() 
    return ;
  ,
  // props:SelectedGameComponent:Object,
  methods: 
    ...mapActions(["allGames"])
  ,
  computed: 
    ...mapGetters(["getSelectedGame"]),

    gameSelected() 
      return this.getSelectedGame(this.gameCrabId);
    
  ,
  async created() 
    await this.allGames;
    await this.gameSelected;
    await console.log(this.gameSelected);
    
  ,
 
</script>

然后在我的状态管理组件 (Vuex) 上，我触发方法 getter，一旦我单击步骤 2 的按钮，该方法最终会带给我，该对象的 id 与所需的相同，但首先我公开了其中的状态在那个对象数组中是

state: 
    allGamesData: all_games:[
    "game_id": 1,"game_player": "Romi","game_score": 0,
    "game_id": 2,"game_player": "Messi","game_score": 0,
    "game_id": 3,"game_player": "CR7","game_score": 0,
   ]
,
,

   getters:
    getSelectedGame: (state) => (gameCrabId) => 
      console.log(gameCrabId);

      return state.allGamesData.all_games.find((gameID) => 
        gameID.game_id === gameCrabId;
      );
    ,

这是最终访问状态和对象数组的getter，并使用双箭头函数首先瞄准状态，然后通过参数（gameCrabId），这是一次暴露id的必要条件完成指向该选定项目的链接；然后在我的状态下返回对该对象数组的访问，我只需使用函数 find() 来建立参数（gameCrabId）携带的 id 和来自的对象数组之间的比较状态，一旦在与该 id gameID.game_id === gameCrabId 匹配的对象中找到第一个可比较的项目，就会打破循环

为了查看我的 id 载体是否工作，我设置了一个日志，并且工作，带来了数字，但由于任何原因，过滤器 find() 将我在选择的对象中抛出未定义，尽管曾经有 id比较得到解决，不可能检索该对象的任何信息

【参考方案1】：

缺少来自find() 的返回

Array.prototype.find() 的回调必须返回一个布尔值，但目前它什么也不返回，所以find() 的结果总是null：

return state.allGamesData.all_games.find((gameID) => 
  gameID.game_id === gameCrabId; // FIXME: No return statement
);

类型不匹配

game_id 是Number，但gameCrabId 是string，而getSelectedGame() 使用=== 比较两者，即requires the operands to have the same type。一种解决方案是执行显式类型转换以确保两个操作数都是Number：

getters: 
  getSelectedGame: state => gameCrabId => 
    return state.allGamesData.all_games.find((gameID) => 
      // return gameID.game_id === gameCrabId;  // DON'T DO THIS
      return gameID.game_id === Number(gameCrabId);
    );
  

demo