TypeError:无法读取reactjs中未定义的属性“toLowerCase”

我正在使用antd设计的选择。一切都很好，但当我用一些字母搜索时，我面临着错误

未处理的运行时错误

组件代码：

    import React, { Component } from 'react';
    import Link from 'next/link';
    import Router from 'next/router';
    import { Form, Input, Select } from 'antd';
    const { Option } = Select;
    
    class FormCheckoutInformation extends Component {
        constructor(props) {
            super(props);
          
        }
    
     onChange(value) {
          console.log(`selected ${value}`);
        }
        
         onBlur() {
          console.log('blur');
        }
        
         onFocus() {
          console.log('focus');
        }
        
         onSearch(val) {
          console.log('search:', val);
        }
    
        render() {
     return (
            <Form className="ps-form--checkout">
               <div className="ps-form__content">
    
                  <div className="form-group">
                      <Form.Item>
                          {getFieldDecorator('district', {
                              rules: [
                                  {
                                      required: false,
                                      message:
                                          'Enter a district!',
                                  },
                              ],
                          })(
                              <Select
                                  showSearch
                                  style={{ width: 200 }}
                                  placeholder="Select a person"
                                  optionFilterProp="children"
                                  onChange={this.onChange}
                                  onFocus={this.onFocus}
                                  onBlur={this.onBlur}
                                  onSearch={this.onSearch}
                                  filterOption={(input, option) =>
                                  option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                  }
                              >
                                  <Option value="jack">Jack</Option>
                                  <Option value="lucy">Lucy</Option>
                                  <Option value="tom">Tom</Option>
                              </Select>,
                          )}
                      </Form.Item>
                </div>
             </div>
            </Form>
    );
    } 

我不知道这个问题，因为我是新来的。

---

任何帮助都将不胜感激。

您没有正确使用这些值。在ant design中对select进行排序的正确方法是：

filterOption={(input, option) =>
  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}

---

您需要从选项访问子项。道具

请将您的代码作为文本而不是图像发布，以便查看者可以轻松地重现问题，如子项为空

filterOption={(input, option) =>
  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}