#javascript #reactjs
#javascript #reactjs
Вопрос:
Допустим, у меня есть массив объектов, который выглядит как
[{
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)
после первого, но это только привело к тому, что мои данные вообще не загружались, независимо от идентификатора ссылки.
Я только что потратил столько времени, пытаясь найти решение, у меня просто закончились идеи.
Был бы благодарен за любые предложения!
Ответ №1:
.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
возвращаете.
Комментарии:
1. спасибо за такой быстрый ответ! Я пробовал ваше решение, но оно все равно не сработало, поэтому я попытался сравнить t.details. идентификатор с определенным номером вместо id, и это сработало. Похоже, должна быть какая-то проблема с типами, потому что моим следующим шагом было просто превратить ‘===’ в ‘==’, и теперь он работает отлично. Большое вам спасибо!
2. Похоже
id
, это число, а параметры — строка. Если вы преобразуете один тип в тип другого, он также будет работать.