Υλοποιήστε ένα συστατικό για την εμφάνιση μιας λίστας ομάδων με συμμετέχοντες. Λαμβάνει έναν πίνακα ομάδων (με όνομα και λίστα με ID χρηστών συμμετεχόντων) και έναν ξεχωριστό πίνακα χρηστών (με ID και όνομα). Πρέπει να συσχετίσετε τις ομάδες με τους χρήστες βάσει του ID και να εμφανίσετε κάρτες ομάδων με τη λίστα συμμετεχόντων. Αν δεν υπάρχουν συμμετέχοντες — εμφανίστε 'κανένας συμμετέχων'; αν υπάρχει το ID χρήστη, αλλά ο χρήστης δεν βρεθεί στη λίστα — εμφανίστε ένα παύλα. Χαρακτηριστικό: το ID χρήστη μπορεί να έρθει ως πίνακας, αριθμός, null ή 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 есть, но пользователя нет в списке — выводим "-".
• Выводим карточки команд с перечислением участников.