Question

我想隐藏选择列表的重复选项。请参阅此example以了解我的意思。现在，我只能选择其中一个重复选项，但它们仍会显示。

我试图用CSS隐藏它们。

数据：

＆＃13;

const ERRORS = [
    {
        id: 1,
        customer: "Testcompany 1",
        sender: "Lars Olsen",
        title: "Conference Papers",
        body: "I don't know how this works...",
        predicted: 22, real: 34,

    },
    {
        id: 2,
        customer: "Testcompany 1",
        sender: "Stine Nilsen",
        title: "Expense Reports",
        body: "I need some help with the expense reports...",
        predicted: 13, real: 31,
    },
    {
        id: 3,
        customer: "Testcompany 1",
        sender: "Steinar Trolo",
        title: "Server Fail",
        body: "My server is failing. Please help.",
        predicted: 13, real: 31,
    },
    {
        id: 4,
        customer: "Testcompany 1",
        sender: "Steinar Trolo",
        title: "Server Fail",
        body: "My server is failing. Please help.",
        predicted: 13, real: 31,
        label: "Second"
    },
    {
        id: 5,
        customer: "Testcompany 2",
        sender: "Steinar Trolo",
        title: "Server Fail",
        body: "My server is failing. Please help.",
        predicted: 13, real: 31,
    }
]

＆＃13;

选择组件：

＆＃13;

<Select
  options={ERRORS}
  value={this.state.selectValue}
  onChange={this.updateValue.bind(this)}
  searchable
  labelKey="customer"
  valueKey="customer"
/>

＆＃13;

Answer 1

如果您只想提供不同的客户，请提供仅限不同客户的列表，例如Lodash：

options={_.uniqBy(ERRORS, (e) -> (e.customer))}

为了避免可能的混淆，最好不要给出没有重复客户的随机对象列表，只提供不同客户的列表。

隐藏重复的反应选择选项

1 个答案: