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

Question

在我正在构建的这个应用程序中，我在通过 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比较得到解决，不可能检索该对象的任何信息

Answer 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