如何渲染这张地图？

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. 推特用户名：5
2. 推特用户名：4
3. 推特用户名：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 的细分：

所以树似乎去 array --> array --> object 但我不确定我需要做什么来渲染它。

Answer 1

首先，请查看Map 的文档。请注意，可用的方法包括entries、keys、values 和forEach。没有 map 方法（尽管有人认为应该有）。

还要注意 map 是可迭代的，因此您可以执行 for (let [key, value] of map){…}（这与调用 .forEach(…) 或 .entries().forEach(…) 几乎相同）。

不过，您可能想要的是Array.from(map.entries()).map(…) 或[...map.entries()].map(…)。 .entries()返回一个[key, value]对的map迭代器，可以转换成数组，里面有.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

您可以遍历 Map 的键：

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