Выбор объекта c внутри массива объектов, выбрасывающих undefined в приложении Vuejs / Java

Question

В этом приложении, которое я создаю, у меня небольшая проблема со ссылкой на SPA для выбранного элемента по его идентификатору. Получив свои данные в конечную точку (действие), я получил массив объектов, затем через геттер я просто беру все эти данные, и с помощью функции find () я фильтрую весь массив, выбрасывающий объект, содержащий ссылку id на выбранный. Допустим:

Первый - Отображение на маршрутизаторе ссылки и условия идентификатора, которые размечают объект для выбора

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

Второй - E выставление компонента, к которому я обращаюсь через маршрутизатор связать предполагаемый объект, который содержит запрошенный идентификатор

<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) , я запускаю метод получения, который в конечном итоге возвращает мне, как только я нажимаю кнопку на шаге 2, объект, который имеет тот же идентификатор, что и требуемый, но сначала я показываю состояние, в котором в этом массиве объектов

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;
      });
    },
}

И это геттер, который в конечном итоге получает доступ к состоянию и этому массиву объектов и использует двойной функция стрелки сначала нацелена на состояние, а во-вторых, через параметр (gameCrabId), который является единственным, который предоставляет идентификатор, столь необходимый для завершения ссылки на этот выбранный элемент; затем возвращая доступ к этому массиву объектов в моем состоянии, я просто используйте функцию find (), чтобы установить sh сравнение между этим идентификатором, передаваемым параметром (gameCrabId), и массивом объектов, доставленных из состояния, разорвав цикл, как только найдите первый сопоставимый элемент в объектах, которые соответствуют этому идентификатору gameID.game_id === gameCrabId

Чтобы узнать, работает ли мой носитель идентификатора, я установил журнал, и работает, число выводится, но по любой причине фильтр find () выдает меня неопределенным в объект выбран, несмотря на то, что он уже имеет идентификатор после того, как сравнение будет установлено, поскольку невозможно получить любую информацию об этом объекте введите описание изображения здесь

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() использует === для сравнения двух, что требует операнды должны иметь один и тот же тип . Одно из решений - выполнить явное преобразование типов, чтобы оба операнда были 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);
    });
  }
}

демонстрация