javascript - 我如何渲染这张 map ？

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. 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>
        ))}

    )

我正在尝试映射 map 以呈现数据，但我不知道如何操作。我得到无法读取未定义的属性“map”。我做错了什么？

以下是 map 的详细信息:

所以树似乎是数组-->数组-->对象，但我不确定我需要做什么来渲染它。

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(…) 方法。

所以你的代码非常接近:

  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>
    )