Ant-design: 選択コンポーネントが小道具を介してデータを渡すと、オプションをトラバースしてエラーを報告します

作成日 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>

Optionをトラバースするthis.props.options.mapエラーが報告されます

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

ths @RaoHai
そが

このスレッドは最近のアクティビティがないため、自動的にロックされています。 関連するバグについては新しい問題を開き、このスレッドの関連するコメントにリンクしてください。

このページは役に立ちましたか?
0 / 5 - 0 評価