react-select如何直接使用纯字符串数组作为options选项？

问题原因 #

react-select 4.x 的默认选中项匹配规则仅适配{value, label}结构的对象，你配置的getOptionLabel和getOptionValue仅能控制选项展示、值提取逻辑，无法覆盖匹配规则，纯字符串作为选项时默认匹配失效，导致选中后展示为空。

解决方案 #

无需转换字符串数组为对象格式，新增isOptionEqualToValue属性自定义匹配规则即可，最终onChange返回的选中值为纯字符串，无需二次转换：

import React, { useState } from "react";
import Select from "react-select";

const optionsStringsOnly = ["Chocolate", "Strawberry", "Vanilla"];

const MyComponent2 = () => {
  // 选中值直接为字符串类型
  const [selected, setSelected] = useState(null);

  return (
    <Select
      options={optionsStringsOnly}
      getOptionLabel={option => option}
      getOptionValue={option => option}
      isOptionEqualToValue={(option, value) => option === value}
      value={selected}
      onChange={newVal => setSelected(newVal)}
    />
  );
};

非受控模式下无需配置value和onChange，保留其余三个配置项即可正常使用，选中值仍为纯字符串。

内容的提问来源于stack exchange，提问作者Fabian