如何渲染此地圖？

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的細分：

所以樹似乎去了數組->數組->對象，但是我不確定渲染該怎么做。

Answer 1

首先，請查看Map的文檔。 注意，可用的方法包括entries ， keys ， values和forEach 。 沒有地圖方法（盡管有人認為應該有地圖方法）。

另請注意，地圖是可迭代的，因此您可以進行for (let [key, value] of map){…} （與調用.forEach(…)或.entries().forEach(…)幾乎相同.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>
        ))}
);

簽出此codeandbox： https ：//codesandbox.io/s/o4v0695n5q