Ant-design: Quando o componente select passa dados através de props, ele percorre a Option e relata um erro

Criado em 12 out. 2016  ·  3Comentários  ·  Fonte: ant-design/ant-design

versão antd: 2.0.0
Sistema operacional e sua versão: OS X 10.11.6
Navegador e sua versão: chrome 53.0.2785.116

O código básico é o seguinte:

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

Ao percorrer Option this.props.options.map erro é relatado

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

O erro é relatado na linha 400 em Select.js

_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);
  }
});

Se estiver escrito diretamente como Option , não há problema

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

Comentários muito úteis

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

ou

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

Todos 3 comentários

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

ou

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

ths @RaoHai
soga

Este tópico foi bloqueado automaticamente porque não teve atividade recente. Por favor, abra um novo problema para bugs relacionados e link para comentários relevantes neste tópico.

Esta página foi útil?
0 / 5 - 0 avaliações