Uncaught TypeError: Не удается прочитать свойство 'filterText' undefined

Question

Я передал filterText=this.state.filterText в таблицу для детей, чтобы фильтровать только фильмы, содержащие буквы, которые я набрал в поисковик.

Внутри Table Компонент Я создал функцию CheckIfFiltered, чтобы отфильтровать фильмы и проверить, содержит ли таблица «filterText».

Проблема заключается в том, что, когда я пытаюсь запустить его есть ошибка:

"Uncaught TypeError: Cannot read property 'filterText' of undefined"

Хотя я прошел filterText в течение реквизита, к компоненте табл. Пожалуйста, помогите мне решить эту проблему.

var Row = React.createClass({ 
 
    render: function(){ 
 
     return(
 
      <tr> 
 
       <td>{this.props.episode.title}</td> 
 
       <td><a href ="top">Link</a></td> 
 
      </tr> 
 
     ); 
 
    } 
 
}); 
 

 

 
var Table = React.createClass({ 
 
    render: function(){ 
 
     var CheckIfFiltered=function (episode, index, ar){ \t \t \t 
 
      if (episode.title.toLowerCase().indexOf(this.props.filterText.toLowerCase()) > -1){ 
 
       return true; 
 
      } 
 
      else { 
 
       return false; 
 
      } 
 
     } 
 

 
     var filter_rows = this.props.episodes.filter(CheckIfFiltered).map(function(episode){ 
 
      return <Row episode={episode} key={episode.title} /> ; 
 
     }); 
 

 
     return(
 
      <div className="row spacer"> 
 
       <div className="col-lg-4 col-lg-offset-4"> 
 
        <table width="100%"> 
 
         <tbody>{filter_rows}</tbody> 
 
        </table> 
 
       </div> 
 
      </div> 
 
     ); 
 
    } 
 
}); 
 

 

 
var Search = React.createClass({ 
 

 
    changeFilteringSearch: function(){ 
 
     this.props.changeFiltering(
 
      this.refs.filterTextInput.value 
 
     ); 
 
    }, 
 

 
    render: function(){ 
 
     return (
 
      <div className="row "> 
 
       <div className="col-lg-4 col-lg-offset-4"> 
 
        <input type="search" className="form-control" value = {this.props.filterText} ref="filterTextInput" onChange={this.changeFilteringSearch} className="form-control" placeholder="Search for episode" /> 
 
       </div> 
 
      </div> 
 
     ); 
 
    } 
 
}); 
 

 

 
var FilterableEpisodesTable = React.createClass({ 
 

 
    getInitialState: function() { 
 
     return { 
 
      filterText: 'qwerty' 
 
     }; 
 
    }, 
 

 
    changeFiltering: function(text){ 
 
     this.setState({ 
 
      filterText: text 
 
     }); 
 
    }, 
 

 
    render: function(){ 
 
     return(
 
      episodes=this.props.episodes, 
 
      <div> 
 
       <Search filterText={this.state.filterText} changeFiltering={this.changeFiltering}/> 
 
       <hr/> 
 
       <Table episodes={episodes} filterText={this.state.filterText}/> 
 
      </div> 
 
     ); 
 
    } 
 
}); 
 

 

 
var episodes = [{title : "Angular with Yeoman",}, 
 
       {title : "Using D3 with Rickshaw and Angular",}, 
 
       {title : "Canvas with paper.js",}, 
 
       {title : "Express.js middleware",}, 
 
       {title : "Metro",} 
 
       ]; 
 

 
ReactDOM.render(
 
    <FilterableEpisodesTable episodes = {episodes}/>, 
 
    document.getElementById('example') 
 
);

Answer 1

Я думаю, что это простая задача, область применения, проверить это и дайте мне знать, если это помогает.

render: function(){ 
     var self = this; 
     var CheckIfFiltered=function (episode, index, ar){   
       if (episode.title.toLowerCase().indexOf(self.props.filterText.toLowerCase()) > -1){ 
        return true; 
       } 
       else{ 
        return false; 
       } 

Answer 2

CheckIfFiltered работает в другом контексте, как вы прошли его для фильтрации, поэтому он просто должен быть связан.

Либо

var CheckIfFiltered=function(episode){    
    if (episode.title.toLowerCase().indexOf(this.props.filterText.toLowerCase()) > -1){ 
    return true; 
    } else { 
    return false; 
    } 
}.bind(this) 

или

var filter_rows = this.props.episodes.filter(CheckIfFiltered.bind(this)).map(...) 

поможет вам объем его правильно. В качестве альтернативы добавьте его как метод класса, я думаю, React.createClass функции autobinds, но обратите внимание, что если вы перейдете на синтаксис ES2015, то поведение JS, которое никогда не будет выполняться автоматически, будет происходить, поэтому вам придется привязать его самостоятельно.

React.createClass({ 
    CheckIfFiltered: function(episode, index, ar){   
    return episode.title.toLowerCase().indexOf(this.props.filterText.toLowerCase()) > -1 ? true : false 
    }, 
    render: function() { ... } 
})