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

Question

我正在尝试使用 React Table 学习多过滤器。这是我的Demo/Fiddle

我正在尝试消除我的 React Table 下拉列表中的重复值

        <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 };
          })}
        />

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

。如您所见，Sam 来了两次。

。 Jones1 也来了两次。

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

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

Answer 1

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

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

https://codesandbox.io/s/40n0jnzk5x 请参阅修复 firstdropdown

辅助函数

var uniqueOptions = (objectsArray, objectKey) => {

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

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

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

      ....
      multi={true}
      options={this.uniqueOptions(this.state.data, 'firstName').map((name, i) => {
        return { id: i, value: name, label: name };
      })}
      ...

理想情况下，您会计算此外部渲染以防止在每次渲染时重新计算，但您明白了

Answer 2

试试这个

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