Как мне сделать эту карту?

Question

let array = this.props.data.allGoogleSheetSpacesRow.edges;

    const results = [...array.reduce((r, e) => {
      let k = `${e.node.twitter}`;
      if(!r.has(k)) r.set(k, {...e, count: 1})
      else r.get(k).count++
      return r;
    }, new Map)]

Я использую Reduce, чтобы получить количество повторяющихся имен пользователей Twitter в моем массиве для создания таблицы лидеров, например:

1. Имя пользователя Twitter: 5
2. Имя пользователя Twitter: 4
3. Twitter Имя пользователя: 2

let leaderboard = results;
console.log(leaderboard);

return (
        {leaderboard.map((item, index) => (
          <div key={index}>
            {item.value.map((c, i) => (
              <div key={i}>
                <h3>{c.count}</h3>
                <h3>{c.node.twitter}</h3>
                <hr />
              </div>
            ))}
          </div>
        ))}

    )

Я пытаюсь отобразить карту, чтобы отобразить данные, но не знаю, как это сделать.Я получаю Cannot read property 'map' of undefined.Что я делаю не так?

Вот разбивка map:

Так что дерево, похоже, идет массив -> массив-> object , но я не уверен, что мне нужно сделать, чтобы сделать это.

Answer 1

Для начала посмотрите документы на Карта .Обратите внимание, что доступные методы включают entries, keys, values и forEach.Нет метода карты (хотя можно утверждать, что так и должно быть).

Также обратите внимание, что карта является итеративной, поэтому вы можете сделать for (let [key, value] of map){…} (что почти так же, как вызов .forEach(…) или .entries().forEach(…)).

Что вы, вероятно, хотите, однако, это Array.from(map.entries()).map(…) или [...map.entries()].map(…)..entries() возвращает итератор карты из пар [key, value], которые можно преобразовать в массив с методом .map(…).

, поэтому ваш код довольно близок:

  return (
        <div>{Array.from(leaderboard.entries()).map(([key, value]) => (
          <div key={key}>
              <div>
                <h3>{value.count}</h3>
                <h3>{value.node.twitter}</h3>
                <hr />
              </div>
          </div>
        ))}</div>
    )

Answer 2

Вы можете перебирать ключи вашей карты:

return (
        {[...leaderboard.keys()].map(key => (
          <div key={key}>
                <h3>{leaderboard.get(key).count}</h3>
                <h3>{leaderboard.get(key).node.twitter}</h3>
          </div>
        ))}
);

Проверьте эти коды и флажок: https://codesandbox.io/s/o4v0695n5q