如何在 Select 选项 UI 小猫中显示实际值和原始选项 ID？

Question

我正在从 API 获取数据，以便在 UI Kitten

的 Select 组件中显示选项

数据格式是这样的

const data = [
    {
       "id": 1, 
       "name": "General",
    },
    {
       "id": 2, 
       "name": "Other Category",
    },
    {
       "id": 3, 
       "name": "Public transport",
    },
    {
       "id": 4, 
       "name": "Help Support",
    }
]

它在下拉列表中显示数据，但选择后显示 option1, option 2 等 但我想显示原始数据 onselect 我想获取所选选项的原始 ID 因为默认情况下它采用从 0

开始的索引

我用过

  const [selectedIndex, setSelectedIndex] = useState(new IndexPath(0));

我正在这样显示我的数据

<Select
  selectedIndex={selectedIndex}
  status="basic"
  style={[STYLES.input]}
  value={selectedIndex}
  size="large"
  onSelect={(index) => handleFaqCategorySelection(index)}
>
  {data.map((item) => (
    <SelectItem title={item.name} index={item.id} />
  ))}
</Select>;

知道怎么做吗？我试过文档，不清楚动态数据如何工作

提前致谢

Answer 1

虽然这对我来说是无稽之谈，但我只看到一种设置选定选项标签的方法，即再次过滤选项并分配它 value。在找到更好的方法之前，您可以像下面这样尝试

<Select
  selectedIndex={selectedIndex}
  status="basic"
  size="large"
  value={data[selectedIndex.row]?.name}
  onSelect={(index) => {
    setSelectedIndex(index);
  }}
>
  {data.map((item, i) => (
    <SelectItem title={item.name} />
  ))}
</Select>;

注意： 如果您使用 multiSelect={true}，则必须提供 value={[]} 作为数组，其中包含要呈现的标签或元素列表。