javascript - 未捕获的类型错误 : Cannot read property 'filterText' of undefined

Question

我将 filterText=this.state.filterText 传递给子表，以仅过滤包含我在搜索器中输入的字母的影片。

在Table组件内，我创建了函数CheckIfFiltered来过滤电影并检查表格是否包含“filterText”。

问题是当我尝试运行它时出现错误:

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

尽管我已将 filterText 传递给了 props，传递给了 Table 组件。请帮我解决这个问题。

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){			
            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

CheckIfFiltered 在您将其传递给过滤器时在不同的上下文中运行，因此只需绑定(bind)它即可。

或者

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 自动绑定(bind)功能，但请注意，如果您更改为 ES2015 语法，则永远不会自动绑定(bind)的 JS native 行为将发生，因此您必须自己绑定(bind)它.

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