如何消除React表下拉列表中的重复值-ReactJS/JavaScript

我正在尝试学习使用反应表的多重过滤器。这是我的

我试图在我的React表的下拉列表中消除重复值

        <Select
          style={{ width: "50%", marginBottom: "20px" }}
          onChange={entry => {
            this.setState({ select2: entry });
            this.onFilteredChangeCustom(
              entry.map(o => {
                return o.value;
              }),
              "firstName"
            );
          }}
          value={this.state.select2}
          multi={true}
          options={this.state.data.map((o, i) => {
            return { id: i, value: o.firstName, label: o.firstName };
          })}
        />

{
this.setState（{select2:entry}）；
此.onFilteredChangeCustom(
entry.map（o=>{
返回o值；
}),
“名字”
);
}}
值={this.state.select2}
multi={true}
options={this.state.data.map（（o，i）=>{
返回{id:i，值：o.firstName，标签：o.firstName}；
})}
/>

我在下拉列表中得到了重复的值。请帮助我如何消除下拉列表中的重复值

。正如你所看到的，萨姆要来两次

。琼斯一号也来了两次

基本上我在过滤每一列，上面的函数基本上处理过滤功能。请看截图。这就是问题所在——在我的Json数组中有一些值多次出现。但在下拉列表中，它们应该只出现一次

编辑1-我想要一个可应用于任意数量下拉列表的通用解决方案。到目前为止，我有两个很好的答案。但这两个答案并非一概而论。我想将此独特功能扩展到所有列。我将有15到20列。这就是为什么我需要一个通用的解决方案。

var names = this.state.data.map((o, i) => {
  return o.firstName
})

var uniqueNames = names.filter(function(i, index){
    return names.indexOf(i) >= index
});

请参阅fix以获取第一个下拉列表

辅助函数

var uniqueOptions = (objectsArray, objectKey) => {

   var a = objectsArray.map((o, i) => {
     return o[objectKey]
   })

   return a.filter(function(i, index){
      return a.indexOf(i) >= index
   })
}

“名字”下拉列表的用法（与任何其他下拉列表相同）

理想情况下，您可以计算此外部渲染以防止在每次渲染时重新计算，但您得到了这样的想法

const getOptions = propertyName => {
  return this.state.data.reduce((accum, elem, i) => {
    const accumulator = [...accum];
    if (!accumulator.some(e => e.value === elem[propertyName])) {
      accumulator.push({
        id: i,
        value: elem[propertyName],
        label: elem[propertyName]
      });
    }
    return accumulator;
  }, []);
};

---

getOptions（“FirstName”）

你在问如何从JavaScript中的集合中删除重复项？@Dave Newton基本上我不知道集合。我正在过滤每一列，上面的函数基本上处理过滤功能。请看截图。这就是问题所在——在我的Json数组中有一些值多次出现。但是在下拉列表中，它们只能出现一次。集合（名词）：一组事物或人。我的观点是，你基本上是在问如何过滤一个到处都是的收藏。是的，我理解你的逻辑。但是我如何在我的代码中使用它呢。你能用叉子叉我的小提琴给我看看吗。有两个下拉列表。请更新我的沙盒，并在我的代码中显示它是如何工作的。这是我的小提琴-我想要一个通用的解决方案，将工作的所有领域，如名字，姓氏。您的解决方案仅适用于firstname。对姓氏应用相同的解决方案。你可以写一个函数来同时解决这两个问题，但我认为这是一个更简洁的解决方案，我们可以有一个更广义的解决方案吗。看，我基本上必须为每个下拉列表编写两行代码。如果我有15个列，我必须一遍又一遍地写这个-var names=this.state.data.map（（o，I）=>{return o.firstName}）添加了一个帮助函数，您可以直接使用它为什么要设置选项？我想要一个通用的解决方案，它将适用于firstName、lastname等所有字段。你的解决办法只适用于名字。你能帮我拿把小提琴给我看看吗？基本上，我希望所有列都有这个。请更新Fiddle/Sandbox并在我的代码中演示它是如何工作的。这是小提琴-

const getOptions = propertyName => {
  return this.state.data.reduce((accum, elem, i) => {
    const accumulator = [...accum];
    if (!accumulator.some(e => e.value === elem[propertyName])) {
      accumulator.push({
        id: i,
        value: elem[propertyName],
        label: elem[propertyName]
      });
    }
    return accumulator;
  }, []);
};