Implementa un componente per visualizzare un elenco di team con i partecipanti. Viene fornito un array di team (con nome e lista di ID degli utenti partecipanti) e un array separato di utenti (con ID e nome). È necessario associare i team agli utenti tramite ID e visualizzare le schede dei team con l'elenco dei partecipanti. Se non ci sono partecipanti, mostrare 'nessun partecipante'; se l'ID utente esiste ma l'utente non viene trovato nell'elenco, mostrare un trattino. Caratteristica: l'ID utente può arrivare come array, numero, null o 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 есть, но пользователя нет в списке — выводим "-".
• Выводим карточки команд с перечислением участников.