将具有多个值的选项传递给React-select

Question

下面是我如何调用“选择”菜单的摘要：

import Select from 'react-select';

const SelectMenu = (props) => {
  const { options, defaultValue, onChange, name, label } = props;
  return (  
      <Select
        options={options}
        defaultValue={defaultValue}
        onChange={onChange}
        name={name}
        id="search-select"
      />
  );
};

我的选项对象如下：

TestObj: [
  {
    label: 'Test 1',
    value: 3.49
  },
  {
    label: 'Test 2',
    value: 3.99
  },
  {
    label: 'Test 3',
    value: 3.89
  },
  {
    label: 'Test 4',
    value: 3.99
  },
  {
    label: 'Test 5',
    value: 0
  }
]

因为两个选项共享相同的值，所以我得到了这样的效果：

可以看到，由于测试2和4共享相同的值，因此它们都显示为选定状态。

有没有一种方法可以在保持相同值的同时让我只选择实际选择的选项？

Answer 1

默认情况下，react-select检查是否选择了值的方式是提取value并将其与所选内容（带有值键的对象数组）进行比较。

使用isOptionSelected，您可以覆盖所采用的策略：

isOptionSelected={(option, selectValue) => selectValue.some(i => i === option)}

内部函数在不提取value部分而不是比较整个对象的情况下或多或少地起作用。