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

【问题标题】：TypeError: Cannot read property 'toLowerCase' of undefined in reactjsTypeError：无法读取 reactjs 中未定义的属性“toLowerCase”
【发布时间】：2020-09-05 09:19:19
【问题描述】：

我正在使用Select 或antd Design。一切都很好，但是当我用一些字母搜索时遇到错误。

未处理的运行时错误

TypeError: Cannot read property 'toLowerCase' of undefined

组件代码：

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

我无法弄清楚问题所在，因为我是 React.js 的新手。

【问题讨论】：

请将您的代码发布为文本而不是图像，以便查看者可以轻松重现问题
听起来孩子是空的

标签： reactjs select antd

【解决方案1】：

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

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

你需要从option.props访问孩子

【讨论】：

【解决方案2】：

这样就解决了我的问题...使用'?'

option.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0 || false

【讨论】：