Ant-design: select 组件通过 props 传入数据数据遍历 Option 时报错

[zhangchen2397]

antd 版本: 2.0.0
操作系统及其版本: OS X 10.11.6
浏览器及其版本: chrome 53.0.2785.116

基本代码如下：

<FormItem
  label="选择业务"
  labelCol={{ span: 6 }}
  wrapperCol={{ span: 14 }}
>
  {getFieldDecorator('bid', { initialValue: "1" })(
    <Select 
      size="large" 
      style={{ width: 150 }}
      onChange={this.handleSelectChange.bind(this)}
    >
      {
        this.props.options.map((item, index) => {
          <Option key={index} value={item.id}>{item.name}</Option>
        })
      }
    </Select>
  )}
</FormItem>

通过 this.props.options.map 遍历 Option 时，报错

Select.js:400 Uncaught TypeError: Cannot read property 'type' of null

报错位置在 Select.js 中 400行

_react2["default"].Children.forEach(children, function (child) {
  if (child.type === _OptGroup2["default"]) {
    var maybe = _this2.getLabelBySingleValue(child.props.children, value);
    if (maybe !== null) {
      label = maybe;
    }
  } else if ((0, _util.getValuePropValue)(child) === value) {
    label = _this2.getLabelFromOption(child);
  }
});

如果是直接写死成 Option 则没有问题

<FormItem
  label="选择业务"
  labelCol={{ span: 6 }}
  wrapperCol={{ span: 14 }}
>
  {getFieldDecorator('bid', { initialValue: "1" })(
    <Select 
      size="large" 
      style={{ width: 150 }}
      onChange={this.handleSelectChange.bind(this)}
    >
      <Option value="1">option1</Option>
      <Option value="2">option2</Option>
    </Select>
  )}
</FormItem>

[RaoHai]

this.props.options.map((item, index) => {
    return <Option key={index} value={item.id}>{item.name}</Option>
})

or

this.props.options.map((item, index) => <Option key={index} value={item.id}>{item.name}</Option>)

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

[zhangchen2397]

ths @RaoHai
soga

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.