SelectInput react admin过滤选择中的重复值并仅显示唯一值答案

【问题标题】：SelectInput react admin to filter duplicate values in choices and display only unique valuesSelectInput react admin过滤选择中的重复值并仅显示唯一值
【发布时间】：2021-11-03 23:24:08
【问题描述】：

我正在使用 react-admin SelectInput 并使用名称作为选项，但列表中有相同名称，因此选项显示重复值。我曾尝试对过滤重复值进行研究，但似乎无法使其发挥作用。

我的数据如下所示：

data: [{name: "car1",id: 1,}, {name: "car1",id: 2,}, {name: "car2",id: 3,}]

选择选项将显示：car1, car 1, car 2 我不想显示重复：car1, car2

这是我的代码：

<SelectInput optionText={<Choice/>}/>

const Choice = ({...record}) => {
    return(
        <span>{`${record && record.record.carName}`}</span>
    )
}

它允许我像这样使用下面的选择选项，它显示“测试”，所以我认为可以在这里完成，但我找不到一个好的逻辑来实现过滤器。有人有什么想法吗？我将不胜感激！

 `${record && record.record.carName}` !== 'car1'  ?  <span>test</span> : null

【问题讨论】：

我建议在将数据传递给<SelectInput /> 之前过滤掉数据。而不是在选择本身中过滤它。

标签： reactjs react-admin

【解决方案1】：

您可以使用 Set 进行过滤。 Set 仅存储唯一值。我们根据名称是否已存在于 Set 中过滤数据。我希望你不要在意id。因为第一个项目将保留，最后一个项目将作为重复项删除。希望思路清晰。

    let s = new Set();
    let newData =  data.filter(d => {
      if (!s.has(d.name)) {
        s.add(d.name);
        return d;
      }
    });

【讨论】：

谢谢你们！我只考虑在选择中这样做，因为我觉得使用 react-admin 在数据中实现过滤器有点复杂，但我会尝试看看我是否可以让它工作

【解决方案2】：

如果您想要的只是选择中没有重复项，我建议您在将它们发送到SelectInput 之前过滤它们。

您可以通过以下方式做到这一点：

const data = [{name: "car1",id: 1,}, {name: "car1",id: 2,}, {name: "car2",id: 3,}];

const uniqueChoices = data.reduce((acc, choice) => {
  if (acc.some(item => item.name === choice.name) {
    return acc;
  }
  return [...acc, item]
}, []);

<SelectInput choices={uniqueChoices} />

【讨论】：