Կատարեք կոմպոնենտ, որը ցուցադրում է թիմերի ցանկը՝ մասնակցողներով: Գումարած է թիմերի զանգված (անունով և մասնակցող օգտվողների ID-ների ցանկով) և առանձին օգտվողների զանգված (ID և անունով): Պետք է կապել թիմերը օգտվողների հետ ID-ով և ցուցադրել թիմային քարտեր՝ մասնակցողների ցուցակով: Եթե մասնակցողներ չկան — ցույց տալ 'մասնակիցներ չկան'; եթե user ID-ն կա, բայց օգտվողը չի գտնվել ցուցակում — ցույց տալ հորիզոնական նշան: Հատկություն՝ user 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 есть, но пользователя нет в списке — выводим "-".
• Выводим карточки команд с перечислением участников.