Как я могу привязать объект к компоненту SelectItem?

Question

Кто-нибудь может мне помочь в этом? Я использую компоненты select и selectiem UI-Kitten, и мне нужно знать, как привязать объект к компоненту 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() предназначены для массивов, поэтому нельзя использовать их для Нет собственной карты для объектов . но если структура данных, поступающая с сервера, находится вне вашего контроля, поэтому вы может делать что-то вроде сопоставления ключей и значений с помощью методов объекта

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

надеюсь помогает