小文字の反応jsを読み取ることができません

Question

私のデータのフィルター検索を作成するには反応しています。これは、すべて正常に働いていたが、その後、私はエラーを得た：

Uncaught (in promise) TypeError: Cannot read property 'toLowerCase' of undefined.

私が更新すると、エラーをnullに状態探索が

'toLowerCase' of null.

なるが、私は空の文字列としてそれを置いたときにエラーがundefinedなり。私はすべてがうまく働いていたと、このエラーが突然来て、私はあなたの助け

を必要としてくださいHERESにコード

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; 

Answer 1

問題は、コード

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

のこの作品である、と述べたと同じように

this.state.searchは未定義/ヌルです。したがって、そのプロパティを読み取ることはできません。

私は念の検索のすべての項目を返す推薦ゆえにそのコードを変更し、/ nullに、一般的に任意のfalsey値が定義されていない：あなたはしかし、エラーが出た場合

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()') 

文字列でのみLowerCaseを実行できるので、に電話する必要があります。