React 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 组件的代码，render options 函数将您传入的选项转换为 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' }}
      />
    ))
  }

该数组的键是通过获取 value 属性并将索引附加到它来设置的：

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>

这可能是您的问题，如果您有重复的值，那么键将不是唯一的。仔细检查选项列表以确保没有重复值。