Question

我正在尝试访问我的组件的状态，但我一直收到错误Cannot read property 'state' of undefined。

render: function() {
    return (
        <div className='arsenal-feed'>
            <h1>{this.state.query}</h1>
            <SearchInput query={this.state.query} onUserInput={this.onChangeHandler}/>
            <ul>
                {
                    this.state.posts.filter(function(val, i, arr) {

                        if (val.body.indexOf(this.state.query) !== -1) {
                            return <li key={i}>{val.body} <ActionButtons key={i}/></li>
                        }
                    })
                }
            </ul>
        </div>
    );  
}

这一行抛出错误：

if (val.body.indexOf(this.state.query) !== -1)

我认为正确的方法是添加一个存储外部的变量，但我似乎无法弄清楚放在哪里，因为这也会引发错误。

Answer 1

Array.prototype.filter()接受第二个参数，在调用过滤函数时将用作this值，因此将this作为第二个参数传递。

<ul>
    {
        this.state.posts.filter(function(val, i, arr) {

            if (val.body.indexOf(this.state.query) !== -1) {
                return <li key={i}>{val.body} <ActionButtons key={i}/></li>
            }
        }, this)
    }
</ul>

如何在过滤函数中访问React组件的this.state？

1 个答案: