Блог

Допустим, у меня есть массив объектов, который выглядит как

 [{
details:
   {id: 7},
type: minigame1,
...(blabla some other values that i'll have to access later)
},
{
details:
  {id: 8},
type: minigame1,
...(blabla some other values that i'll have to access later)
},
{
details:
  {id: 10},
type: minigame2,
...
}]
  

теперь ссылка на мой компонент основана на этих значениях, поэтому, допустим, я выбираю первую мини-игру, и меня перенаправляют на localhost / minigame1 / 7

ссылка работает, хотя я нашел только временное решение, чтобы фактически получить определенные выбранные данные мини-игры.

 if (taskData !== '') {
    minigameData = taskData
      .filter(t => t.type === 'minigame1')
      .map(el => {
        questionsData = el;
      });
  }
  

хотя это игнорирует идентификатор и извлекает данные только для первой игры, которую он может найти (с идентификатором 7), даже если я выбираю игру с идентификатором 8.
Итак, я попытался использовать старый добрый

 let { id } = useParams();
  

Моя проблема в том, что я не уверен, как заставить его фильтровать данные игры по идентификатору, а также по типу игры.

Я попытался добавить еще один

 .filter(t => t.details.id === id) 
  

после первого, но это только привело к тому, что мои данные вообще не загружались, независимо от идентификатора ссылки.

Я только что потратил столько времени, пытаясь найти решение, у меня просто закончились идеи.

Был бы благодарен за любые предложения!

.filter возвращает массив всех элементов, соответствующих критериям. Однако вы используете только 1 поле, когда вам действительно нужно сопоставить type И details.id . Все, что вам нужно сделать, это добавить 2-й критерий в свой оператор return.

Однако для вашего варианта использования я бы подумал, что .find это будет лучшим выбором. Вместо того, чтобы возвращать массив всех вариантов, он возвращает только первый, который он находит (поскольку мини-игра идентификатор, вероятно, должен быть уникальным, верно?), Поэтому я обновил вашу логику ниже.

 if (taskData !== '') {
    minigameData = taskData
      .find(t => t.type === 'minigame1' amp;amp; t.details.id === id);
  }
  

Наконец, я удалил ваш .map в конце, поскольку он ничего не делал. Вы не возвращали значение в конце, поэтому я не уверен, каким был бы конечный результат.

Если t.details.id он ничему не соответствует, я бы проверил, что вы params возвращаете.