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>

这是行不通的，因为地图功能需要（值：从不，索引：数字），并且SelectItem组件没有“键”道具。

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

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

Answer 1

您可以使用 index 这样的键

<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

首先可以修改的是数据的结构！它是2x5的非结构化矩阵！并且.map()函数是用于数组的，因此不能用于 Objects的本机映射 。但是，如果来自服务器的数据结构不可用您的控件，以便您可以执行诸如使用对象方法通过键和值进行映射之类的操作

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

我希望对您有帮助

Answer 3

这似乎对我有用

<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>

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

3 个答案: