Удаление дубликатов при вызове из Github API в React
У меня есть функция, в которой я вызываю список типов файлов из gist API пользователя, перебирая его (https://api.github.com/users/getify/gists):
const FileTags = ({files}) => {
return(
<div>
{
Object.keys(files).map(function (key) {
return(
<ul>
<li> {files[key].language } </li>
</ul>
)
})
}
</div>
);
}
Я могу успешно вызвать список языков, но в списке много дубликатов, например:
Уценка Уценка JavaScript JavaScript JavaScript JavaScript JavaScript
Как отфильтровать уникальные языки, чтобы они не повторялись, например "Markdown Javascript" ?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Может быть, примерно так:
const FileTags = ( {files } ) =>
<div>
<ul>
{
[...new Set(Object.keys(files).map(key => files[key].language))]
.map( el => <li>{el}</li>)
}
</ul>
</div>
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
The Set object lets you store unique values of any type, whether primitive values or object references.
Разве ваша переменная файлов не является объектом объектов? Вот рабочий пример: codeandbox.io/s/n8v95l5xj Если ваши условия другие, вы можете изменить код в соответствии с этим. Но, в конце концов, вы должны каким-то образом получить уникальные значения.
Я пробовал в своем проекте, и это не сработало :( Когда я использую api.github.com/users/getify/gists, у него несколько языков, и все дубликаты появляются. Код работает в моем Filetag, но на моей главной странице, где я отображаю данные, если я изменяю параметры, я получаю сообщение об ошибке. В настоящее время я называю это так: {users.map ((user, i) => {return <FileTags files = {users [i] .files} />})} это, возможно, что-то сделать здесь? Извините, я новичок в React
Не нужно извиняться, но было бы лучше добавить другие части вашего кода. Вы даже можете использовать codeanbox, если это не проблема. Но ради качества вашего вопроса более важно добавить связанные части кода. Codesandbox не является обязательным. Я иду спать, но это поможет другим, кто захочет помочь тебе.
Спасибо за помощь. Если вы все еще наверху, вот моя песочница: codeandbox.io/s/x7n4korjpo Когда вы ищете "getify" в index.js, вы видите средний столбец, в котором я столкнулся с проблемой.
ОК. Здесь вы извлекаете сущность пользователя, а не на самом деле пользователей. У вас есть куча существенной информации (все объекты), и есть объект "files", содержащий некоторую информацию об этих сущностях. Есть файлы * .md и есть информация о языке. Мой код действительно работает, но только для одного смысла. Если вы внимательно посмотрите страницу, то увидите несколько ul. Это потому, что вы отображаете все суть. Для каждой сути мое предложение работает, в каждом "ul" мы очищаем дубликаты. Но поскольку мы не делаем этого для других объектов gist, вы видите дубликаты в других ul.
Здесь у вас есть несколько вариантов. Вы можете как-то извлечь и объединить все «файлы» перед отправкой FileTags (без карты). Или после сопоставления и передачи в FileTags вы можете объединить и удалить там дубликаты.
Простите, не вижу разницы. Я пробовал это, но все еще получаю повторяющиеся значения