Реагировать Semantic UI - добавить ключ вариантов в раскрывающемся меню

Question

У меня есть этот экземпляр меню Выпадающее:

 <Dropdown 
     selection 
     options={this.state.options} 
     search 
     value={value} 
     onChange={this.handleChange} 
     onSearchChange={this.handleSearchChange} 
     /> 

и когда мой бэкенд возвращает ответ, который затем установить в качестве государства и его структура, как это:

"options": [ 
    { 
     "text": "New York,All Airports (NYC) , USA", 
     "value": "NYC" 
    }, 
    { 
     "text": "New York,Newark Liberty Intl (EWR), USA", 
     "value": "EWR" 
    }, 
    { 
     "text": "New York,John F Kennedy (JFK), USA", 
     "value": "JFK" 
    }, 
    { 
     "text": "New York,La Guardia (LGA), USA", 
     "value": "LGA" 
    } 
    ] 

... Я получаю это предупреждение:

предупреждения: flattenChildren (...): Столкнутое двое детей с тем же ключ, 1:$BLZ. Детские ключи должны быть уникальными; когда двое детей делят ключ , будет использоваться только первый ребенок.

in select (created by Dropdown) 
in div (created by Dropdown) 
in Dropdown (created by SearchForm) 

Как добавить ключи к этим элементам, чтобы предотвратить это предупреждение?

Answer 1

Так, глядя на код для Semantic UI source for the dropdown компонента, функция рендеринга опции преобразует принятый в параметры в массив компонентов DropdownItem:

renderOptions =() => { 
    const { multiple, search, noResultsMessage } = this.props 
    const { selectedIndex, value } = this.state 
    const options = this.getMenuOptions() 

    if (noResultsMessage !== null && search && _.isEmpty(options)) { 
     return <div className='message'>{noResultsMessage}</div> 
    } 

    const isActive = multiple 
     ? optValue => _.includes(value, optValue) 
     : optValue => optValue === value 

    return _.map(options, (opt, i) => (
     <DropdownItem 
     key={`${opt.value}-${i}`} 
     active={isActive(opt.value)} 
     onClick={this.handleItemClick} 
     selected={selectedIndex === i} 
     {...opt} 
     // Needed for handling click events on disabled items 
     style={{ ...opt.style, pointerEvents: 'all' }} 
     /> 
    )) 
    } 

ключ для этого массива устанавливается, принимая значение пропеллер и добавляя индекс к нему:

key={`${opt.value}-${i}`} 

, который всегда должен быть уникальным, так как используется индекс, но есть и другая часть кода для hidden inputs

renderHiddenInput =() => { 
    debug('renderHiddenInput()') 
    const { value } = this.state 
    const { multiple, name, options, selection } = this.props 
    debug(`name:  ${name}`) 
    debug(`selection: ${selection}`) 
    debug(`value:  ${value}`) 
    if (!selection) return null 

    // a dropdown without an active item will have an empty string value 
    return (
     <select type='hidden' aria-hidden='true' name={name} value={value} multiple={multiple}> 
     <option value='' /> 
     {_.map(options, option => (
      <option key={option.value} value={option.value}>{option.text}</option> 
     ))} 
     </select> 
    ) 
    } 

В этом ключе устанавливается только значение, а не значение плюс индекс.

<option key={option.value} value={option.value}>{option.text}</option> 

Это может быть ваша проблема, если у вас есть повторяющиеся значения, тогда ключ не будет уникальным. Дважды проверьте список опций, чтобы убедиться, что у вас нет повторяющихся значений.