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

创建于 2016-10-12  ·  3评论  ·  资料来源: ant-design/ant-design

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>

最有用的评论

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

或者

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

所有3条评论

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

或者

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

这@RaoHai
苏我

该线程已被自动锁定,因为它最近没有活动。 请为相关错误打开一个新问题并链接到此线程中的相关评论。

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

longhuasishen picture longhuasishen  ·  3评论

Orbyt picture Orbyt  ·  3评论

cnchore picture cnchore  ·  3评论

drcmda picture drcmda  ·  3评论

xtznhzxdev picture xtznhzxdev  ·  3评论