1

我正在从 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>;

知道怎么做吗？我试过文件，不清楚如何处理动态数据

提前致谢

4

1 回答 1

0

虽然这对我来说是无稽之谈，但我只看到一种通过再次过滤选项并分配它来设置选定选项标签的方法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={[]}带有标签的数组或要渲染的元素列表。

于 2021-04-09T11:45:34.850 回答