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用户名的数量，以创建排行榜，如下所示：

Twitter用户名：5
Twitter用户名：4
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的细目：

所以树似乎走了 array-> array-> object ，但是我不确定渲染该怎么做。

Answer 1

首先，请查看Map的文档。请注意，可用的方法包括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

如何渲染此地图？

2 个答案: