Javascript 无法读取小写字母

我使用react为我的数据建立一个过滤搜索。一切正常，但后来我出现了一个错误：

未捕获（承诺中）TypeError:无法读取未定义的属性“toLowerCase”

当我将状态搜索更新为null时，错误变为空

null的“toLowerCase”

但是当我把它作为一个空字符串时，错误就变成了

未定义的

就像我说的，一切正常，这个错误突然出现，我需要你的帮助

这是密码

var React = require('react');
var firebase = require('firebase');
var $ = require('jquery');
var axios = require('axios');
var notify = require('bootstrap-notify');
var {Link} = require('react-router');

var SuppliersList = React.createClass({

  getInitialState: function(event){
    return{
      search:'Nicolas',
      data: [],
    }
  },
  updateSearch : function(event) {
    //this.setState({search: event.target.value.substr(0, 20)});
  },
  componentDidMount: function(){
    firebase.database().ref('/suppliers/').once('value').then(function(snapshot) {
      var arr = Object.values(snapshot.val());
      this.setState({data: arr,activity:false});
    }.bind(this));
  },

  render: function () {
    var filteredSuppliers = this.state.data.filter(
      (item) => {
        return item.name.toLowerCase().indexOf(
          this.state.search.toLowerCase()) !== -1;
      }
    )

      var items = filteredSuppliers.map((item, i)=>
      <tr key={item.id}>
       <td>{item.name}</td>
       <td>{item.email}</td>
       <td>{item.phone}</td>

     <td><Link className="btn btn-primary" to={'/edit/'+item.id}>Edit</Link></td>
   <td><Link className="btn btn-danger" to={'/delete/'+item.id}>Delete</Link></td>
        <td><a href="#" className="btn btn-warning" role="button" data-title="johnny" data-id="1">Favourite</a></td>
     </tr>
      );
    return (
       <div>
         <div style={{marginLeft:'50%'}} className="loader"></div>
       <input type="text" value={this.state.search} style={{marginTop:20}} placeholder="search a supplier" onChange={this.updateSearch} className="form-control" id="usr"/>

       <table className="table table-striped table-hover table-users">
         <thead>
           <tr>
             <th>Name</th>
             <th>Email</th>
             <th>Phone</th>
             <th></th>
             <th></th>
           </tr>
         </thead>

         <tbody>
           {items}
         </tbody>
       </table>
</div>

    )},
});

var Suppliers = React.createClass({
  render: function(){
    return (
      <div>
        <nav className="navbar navbar-default navbar-fixed">
          <div className="container-fluid">
            <div className="navbar-header">

              <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
                <a href="#/branch">
                  <i className="fa fa-store"></i>
                </a>
              </button>

              <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
                <a href="#/delete">
                  <i className="fa fa-trash"></i>
                </a>
              </button>

              <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
                <a href="#/edit">
                  <i className="fa fa-edit"></i>
                </a>
              </button>

              <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
                <a href="#/add">
                  <i className="fa fa-plus"></i>
                </a>
              </button>

              <a className="navbar-brand" href="#">Suppliers</a>
            </div>
            <div className="collapse navbar-collapse">
              <ul className="nav navbar-nav navbar-left">

              </ul>
              <ul className="nav navbar-nav navbar-right">
                <li>
                   <a href="#/add">
                      <i className="fa fa-plus"></i>
                    </a>
                </li>

                <li>
                   <a href="#/delete">
                      <i className="fa fa-trash"></i>
                    </a>
                </li>

                <li>
                   <a href="#/edit">
                      <i className="fa fa-edit"></i>
                    </a>
                </li>

                <li onClick={this.refresh}>
                   <a>
                      <i className="fa fa-refresh"></i>
                    </a>
                </li>

                <li>
                   <a href="#/branch">
                      <i className="fa fa-map-marker"></i>
                    </a>
                </li>

              </ul>
            </div>
          </div>
        </nav>

        <table className="table table-hover table-striped">

            <SuppliersList/>

      </table>
      </div>
    )},

  refresh: function(){
    location.reload();
  }
});

  module.exports = Suppliers;

var React=require（'React'）；
var firebase=require（'firebase'）；
var$=require（'jquery'）；
var axios=需要（“axios”）；
var notify=require（'bootstrap-notify'）；
var{Link}=require（'react-router'）；
var SuppliersList=React.createClass({
getInitialState:函数（事件）{
返回{
搜索：'Nicolas'，
数据：[]，
}
},
updateSearch:函数（事件）{
//this.setState（{search:event.target.value.substr（0,20）}）；
},
componentDidMount:function（）{
firebase.database（）.ref（'/suppliers/'）。一次（'value'）。然后（函数（快照）{
var arr=Object.values（snapshot.val（））；
this.setState（{data:arr，activity:false}）；
}.约束（这个）；
},
渲染：函数（）{
var filteredSuppliers=this.state.data.filter(
（项目）=>{
return item.name.toLowerCase（）.indexOf(
this.state.search.toLowerCase（））！=-1；
}
)
var items=filteredSuppliers.map（（item，i）=>
{item.name}
{item.email}
{item.phone}
编辑
删除
);
返回(
名称
电子邮件
电话
{items}
)},
});
var Suppliers=React.createClass({
render:function（）{
返回(












)},
刷新：函数（）{
location.reload（）；
}
});
模块出口=供应商；

问题在于这段代码

var filteredSuppliers = this.state.data.filter(
  (item) => {
    return item.name.toLowerCase().indexOf(
      this.state.search.toLowerCase()) !== -1;
  }
)

this.state.search未定义/null，因此无法读取其属性

我建议在搜索未定义/null的情况下返回所有项目，通常为任何虚假值，因此将代码更改为：

var filteredSuppliers = this.state.search ? this.state.data.filter(
  (item) => {
    return item.name.toLowerCase().indexOf(
      this.state.search.toLowerCase()) !== -1;
  }
) : this.state.data

但是如果你得到了错误

'undefined' is not a function (evaluating 'item.name.toLowerCase()')

---

然后您需要调用

item.name.toString.toLowerCase（）…

，因为您只能在字符串上运行toLowerCase。

这显示了项目，但我仍然无法在搜索栏中键入。没有错误