Implémentez un composant pour afficher une liste d'équipes avec leurs participants. Un tableau d'équipes (avec nom et liste d'ID d'utilisateurs participants) et un tableau séparé d'utilisateurs (avec ID et nom) sont fournis. Il faut associer les équipes aux utilisateurs par ID et afficher des cartes d'équipe avec la liste des participants. Si aucun participant, afficher 'pas de participants'; si l'ID utilisateur existe mais l'utilisateur n'est pas trouvé dans la liste, afficher un tiret. Particularité : l'ID utilisateur peut venir sous forme de tableau, nombre, null ou undefined.

Ниже пример реализации React-компонента, который принимает массив команд и пользователей, сопоставляет участников по ID и выводит карточки с участниками:

import React from 'react';

function TeamList({ teams, users }) {
  // Создаём словарь пользователей по ID для быстрого поиска
  const userMap = React.useMemo(() => {
    const map = new Map();
    users.forEach(user => {
      map.set(user.id, user.name);
    });
    return map;
  }, [users]);

  // Функция для получения списка имён участников команды
  const getParticipantNames = (userIds) => {
    if (!userIds) return ['нет участников'];

    // Приводим userIds к массиву
    let ids = [];
    if (Array.isArray(userIds)) {
      ids = userIds;
    } else if (typeof userIds === 'number') {
      ids = [userIds];
    } else {
      return ['нет участников'];
    }

    if (ids.length === 0) return ['нет участников'];

    return ids.map(id => {
      if (id === null || id === undefined) return '-';
      return userMap.has(id) ? userMap.get(id) : '-';
    });
  };

  return (
    <div>
      {teams.map(team => (
        <div key={team.name} style={{border: '1px solid #ccc', margin: '10px', padding: '10px'}}>
          <h3>{team.name}</h3>
          <ul>
            {getParticipantNames(team.userIds).map((name, idx) => (
              <li key={idx}>{name}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default TeamList;

Объяснение:

• Создаём карту пользователей для быстрого поиска имени по ID.
• Обрабатываем userIds, учитывая, что это может быть массив, число, null или undefined.
• Если участников нет, выводим "нет участников".
• Если ID есть, но пользователя нет в списке — выводим "-".
• Выводим карточки команд с перечислением участников.