Question

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

这是组件的渲染功能

  <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，否则会出现关键错误

Answer 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>

遇到两个孩子使用相同的键，甚至使用不同的键

1 个答案: