遇到两个孩子用同一把钥匙，即使用不同的钥匙答案

【问题标题】：Encountered two children with the same key even with different keys遇到两个孩子用同一把钥匙，即使用不同的钥匙
【发布时间】：2019-04-26 11:18:19
【问题描述】：

有人可以向我解释为什么我会收到此错误吗？

这是组件的渲染函数

  <Select
    mode="multiple"
    placeholder="Search by City, neighborhood or MLS number..."
    defaultValue={[]}
    style={{ width: 400 }}
    onChange={this.handleChange}>
    <OptGroup label="city" key="city">
      {this.props.cities.map((city, i) => (<Option key={"city"+i} value={city.name}>{city.name}</Option>))}
    </OptGroup>
    <OptGroup label="neighborhood" key="neighborhood">
      {this.props.neighbors.map((neighbor, jj) => (<Option key={"neighbor"+jj} value={neighbor.name}>{neighbor.name}</Option>))}
    </OptGroup>
  </Select>

当我删除第二个 OptGroup 时，代码可以正常工作。

我正在使用这个库中的 antd.Select.OptGroup

http://ant.design/components/select/

我不能添加多个 optgroup，否则我会得到关键错误

【问题讨论】：

能否分享OptGroup组件的渲染代码。
@RinkeshGolwala 我正在使用这个库中的 antd.Select.OptGroup ant.design/components/select

标签： reactjs

【解决方案1】：

我找到了，值必须不同，就像每个选项中的键一样。

这是正确的

    const opt1 =
          <OptGroup label="city" key="city">
            {this.props.cities.map((city, i) => (
              <Option key={"city"+i} value={city.name}>{city.name}</Option>
            ))}
          </OptGroup>
const opt2 =
          <OptGroup label="neighborhood" key="neighborhood">
            {this.props.neighbors.map((neighbor, i) => (
              <Option key={"neighbor"+i} value={neighbor.name+" ("+neighbor.city+")"}>{neighbor.name+" ("+neighbor.city+")"}</Option>
            ))}
          </OptGroup>

【讨论】：