Javascript React语义用户界面-向下拉菜单中的选项添加键

我有一个下拉菜单实例：

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

…我得到这个警告：

警告：FlattChildren（…）：遇到两个具有相同 键，

1:$BLZ

。子密钥必须是唯一的；当两个孩子共用一个 键，仅使用第一个子项

---

如何向这些元素添加键以防止出现此警告？

因此，查看组件的代码，“渲染选项”函数会将传入的选项转换为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' }}
      />
    ))
  }

因为使用了索引，所以它应该总是唯一的，但是它的代码还有另一部分

renderHiddenInput=（）=>{
调试（'renderHiddenInput（）'）
const{value}=this.state
const{multiple，name，options，selection}=this.props
调试（`name:${name}`）
调试（`selection:${selection}`）
调试（`value:${value}`）
如果（！selection）返回null
//没有活动项的下拉列表将具有空字符串值
返回(
{{{.map（选项，选项=>(
{option.text}
))}
)
}

在这种情况下，键只设置为值，而不是值加索引

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

{option.text}

---

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

嘿，谢谢你提供的信息。我现在明白了。我认为问题的出现是因为一些数据被缓存了。基本上，我正在进行自动完成搜索，在jQuery版本的语义UI中，我会将

saveRemoteData

设置为等于

false

，以防止出现这种情况。但是，在React版本中，该设置不存在（或者至少据我所知-），如果您还不熟悉，我强烈建议使用。这将让你查看你的选项集合并仔细检查值。嘿，谢谢你的建议，我正在使用Firefox版本的React工具。我又挖了一点，找到了复制品。

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

 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>