在对象上反应映射然后数组答案

【问题标题】：React map on object then array在对象上反应映射然后数组
【发布时间】：2018-05-21 07:39:20
【问题描述】：

这是我的对象，我想在我的组件中映射它，但我有问题，我不能在这个对象上使用映射。第一个值是投票，下一个是用户数组。我如何在 babel 中使用 map ？

  var ObjVote = {
        '1':['EwaK','Jacek','Jacek'],
        '2':['Anna','Pawel','EwaK'],
        '3':['Anna','EwaK','Jacek'],
        '4':['Jas','Jas','Pawel'],
        '5':['Anna','Jas','Pawel']
        }

【问题讨论】：

stackoverflow.com/questions/6857468/…

标签： javascript arrays json reactjs

【解决方案1】：

你可以使用：

Object.keys(ObjVote)
         .map(vote => ({ vote: vote, voters: ObjVote[vote]}))
         .map(data => <Vote {...data} key={data.vote} />)

或者

Object.keys(ObjVote)
         .map(vote => ({ vote: vote, voters: ObjVote[vote]}))
         .map(data => <Vote data={data} key={data.vote} />)

现在在Vote 组件中，您可以通过props.data.votes 访问投票，并通过props.data.voters 访问选民数组。

【讨论】：

意外令牌，预期；选民：ObjVote[vote]}，在选民之后
@PawełBaca 在第一张地图中将大括号放在{} 周围，如下所示：({ vote: vote, voters: ObjVote[vote]})，它会起作用。
Object.keys(ObjVote) .map(vote => ({ vote: vote, voters: ObjVote[vote]})) .map(data => <Vote ...data key={data.vote} />) 现在投票后出错:
@PawełBaca 输入{}，如下所示：<Vote {...data} key={data.vote} /> 或<Vote vote={data.vote} voters={data.voters} key={data.vote} />
好的，但我必须为data.voters 的每个元素设置样式。你知不知道怎么？ :) data.voters 是 EwaKJacekJacek 我需要 <div>Ewa</div> <div>Jacek</div>

【解决方案2】：

您不能在Object 上使用地图。但您可以使用Object.keys()，然后使用map。

 let ObjVote = {
  '1':['EwaK','Jacek','Jacek'],
  '2':['Anna','Pawel','EwaK'],
  '3':['Anna','EwaK','Jacek'],
  '4':['Jas','Jas','Pawel'],
  '5':['Anna','Jas','Pawel']
}

let data = Object.keys(ObjVote).map(key => {
  return {
    vote: key,
    users: ObjVote[key]
  }
})

console.log(data)

【讨论】：

【解决方案3】：

您可以使用Array#from 将其转换为数组，然后您可以对其进行映射。首先，您需要通过添加长度属性将对象转换为类似对象的数组。要添加长度属性，可以使用Object#assign和Object#keys：

const ObjVote = {
  '1':['EwaK','Jacek','Jacek'],
  '2':['Anna','Pawel','EwaK'],
  '3':['Anna','EwaK','Jacek'],
  '4':['Jas','Jas','Pawel'],
  '5':['Anna','Jas','Pawel']
}

const array = Array.from(
  Object.assign( 
    {}, 
    ObjVote, 
    { length: Object.keys(ObjVote).length + 1 } // add the number of keys + 1 (the missing 0 index) as the length property 
  ),
  (voters, vote) => ({ vote, voters }) // create the vote object
).slice(1); // remove the 1st empty element

console.log(array);

【讨论】：