Javascript 为什么Array.from（新集合）在React jsx中不起作用

我试图从GraphQL查询结果生成一个下拉选项，这是一个包含数组的对象。由于TypeScript不支持对象上的迭代，所以我尝试使用纯JavaScript对数据进行迭代。当我简单地按照以下方式编写时：

const unique = Array.from(
 new Set(data.PlayerDetails.map((item: any) => item.country))
);
console.log(unique);

但当我把它放在JSX中时，它就不起作用了。原因可能是什么

...
return (
<p>
  <Bold>Players: </Bold>
  <select className="form-control">
    {Array.from(
      new Set(
        data.PlayerDetails.map((player: any) => {
          return (
            <option key={player.id} value={player.country}>
              {player.country}
            </option>
          );
        })
      )
    )}
  </select>
</p>
);

。。。
返回(

玩家：
{Array.from(
新集(
data.PlayerDetails.map（（玩家：任意）=>{
返回(
{player.country}
);
})
)
)}

);

应为：在

中删除重复项

实际结果：
..
仍然显示所有重复的数据，但前一个代码“unique”显示的数据没有重复。
这与JSX无关，您在这些代码片段中做了两件截然不同的事情

在第一种情况下，通过将玩家条目映射到其国家/地区值，并将其传递给
集合
，以仅获取唯一的国家/地区值，可以消除重复项

在创建
元素的代码中，您正在创建对象。这些将是唯一的，因为每个对象都是唯一的，即使它有相同的内容

我的第一个想法是对播放器数据数组进行预过滤以删除重复项，然后将结果映射到
元素。例如：

const countries = new Set();
const uniquePlayers = data.PlayerDetails.filter(({country}) => {
    if (countries.has(country)) {
        return false;
    }
    countries.add(country);
    return true;
});
return (
    <select className="form-control">
    {uniquePlayers.map((player/*: any*/) => {
        return (
            <option key={player.id} value={player.country}>
              {player.country}
            </option>
        );
    })}
    </select>
);

const countries=new Set（）；
const uniquePlayers=data.PlayerDetails.filter（{country}）=>{
如果（国家/地区）{
返回false；
}
国家。添加（国家）；
返回true；
});
返回(
{uniquePlayers.map（（player/*：any*/）=>{
返回(
{player.country}
);
})}
);

实例：


const数据={
玩家详情：[
{
id:1，
国家：“中国”
},
{
id:2，
国家：“美国”
},
{
id:3，
国家：“芬兰”
},
{
id:1，//重复
国家：“中国”
}
]
};
常量示例=（）=>{
const countries=新集合（）；
const uniquePlayers=data.PlayerDetails.filter（{country}）=>{
如果（国家/地区）{
返回false；
}
国家。添加（国家）；
返回true；
});
返回(
{uniquePlayers.map（（player/*：any*/）=>{
返回(
{player.country}
);
})}
);
};
render（，document.getElementById（“根”））

您正在使用两个不同的属性创建集合。一个是
initialUnits
，另一个是
playerDetails
。也许
PlayerDetails
只是一个空数组？“因为TypeScript不支持对象上的迭代…”JavaScript也不支持。普通对象是不可编辑的。但是
Object.keys
、
Object.values
和
Object.entries
提供了有关对象内容的可编辑信息。@Baruch这只是一个输入错误。
Array.from（新集合（/*…代码创建一个保证唯一的元素数组*/）
。只需使用代码直接创建一个保证唯一的元素数组。每个
…
都将是一个唯一的对象。@shaz-是的，那会，因为…啊，我现在知道你问题的性质了。你已经省略了所有类型。但是我需要使用它们，因为我使用的是
TypeScript
就像，
player:any
@shaz-TypeScript是JavaScript的超集，你永远不需要有类型。如果你想的话，我想你可以想清楚你需要添加什么。对于上面的大部分内容，我确信TypeScript可以推断出类型。您可能必须为
映射指定类型（可能是
新映射（）
），但仅此而已。