react-native - 如何将对象绑定到 SelectItem 组件？

Question

谁能帮我解决这个问题？我正在使用 UI-Kitten 的 select 和 selectiem 组件，我需要知道如何将对象绑定到 SelectedItem 组件？

我想将一些值作为绑定对象传递：

data={
 (['OPT1', 'Option 1'],
  ['OPT2', 'Option 2'],
  ['OPT3', 'Option 3'],
  ['OPT4', 'Option 4'],
  ['OPT5', 'Option 5'])
}

然后，我想用这样的方式渲染每个选择的选项：

const renderOption = (title: string, key: string) => (
     <SelectItem title={title} key={key} />
  );

此选项可以使用地图功能填充：

<Select
  style={styles.inputSetting}
  textAlign="right"
  size="small"
  placeholder={placeholder}
  value={value}>
  {data && data.map(renderOption)}
</Select>

这不起作用，因为 map 函数需要（值：从不，索引：数字），并且 SelectItem 组件没有“键”道具。

我需要获取键值而不是显示值。

任何指向我正确方向的帮助将不胜感激。

Answer 1

你可以像这样使用索引作为键

<Select
  style={styles.inputSetting}
  textAlign="right"
  size="small"
  placeholder={placeholder}
  value={value}>
  {data && data.map((dataItem,index)=>renderOption({title:dataItem,key:index}))}
</Select>

Answer 2

这似乎对我有用

<Select
   style={styles.select}
   placeholder="Default"
   value={displayValue}
   selectedIndex={selectedIndex}
   onSelect={(index) => setSelectedIndex(index as any)}>
   {data.address.map((item, i) => (
     <SelectItem title={item.streetNumber} key={i} />
   ))}
</Select>

Answer 3

可以修改的第一件事是数据的结构！它是非结构化格式的 2x5 矩阵！由于.map()函数是用于数组的，所以不能用于，对象没有本机映射。但是如果来自服务器的数据结构超出您的控制范围，那么您可以使用对象方法通过键和值进行映射

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values

我希望它有帮助