如何让Semantic UI React Search组件使用ID而非Title作为Key

我懂你遇到的这个麻烦——同名公司导致React弹出重复key警告，哪怕自定义了resultRenderer还是没搞定对吧？其实问题出在Semantic UI React的Search组件本身的列表项key逻辑上：

你在resultRenderer里给div加的key，只是你自定义内容元素的key，但Search组件内部遍历results数组生成结果列表时，默认是用每个result对象的title字段作为外层列表项的key的，这才是警告的根源。

解决方案：使用resultKey属性指定唯一key #

Semantic UI React的Search组件专门提供了resultKey属性，用来指定用result对象中的哪个字段作为列表项的唯一key。你只需要在Search组件上加上这个属性，指定为你的id字段就行：

修改你的Search组件代码：

<Grid>
  <Grid.Column width={8}>
    <Search 
      loading={isLoading} 
      onSearchChange={this.handleSearchChange} 
      results={suggestions} 
      value={value} 
      resultRenderer={resultRenderer}
      resultKey="id" {/* 新增这一行，指定用id作为唯一key */}
    />
  </Grid.Column>
</Grid>

为什么之前的方法无效？ #

简单说，resultRenderer只负责渲染每个结果的内容，而Search组件内部的结果列表容器（比如SearchResults组件）在生成每个列表项时，会自己分配key，默认取title。所以哪怕你在自定义的div里加了key，外层列表项的key还是重复的，警告自然不会消失。

另外要确保你的suggestions数组里每个公司对象的id都是唯一的，这是解决问题的前提哦。

内容的提问来源于stack exchange，提问作者Herdís María Sigurðardóttir