Ошибка Cannot read property 'setState' of undefined?

Question

[Ilya]

Возникает ошибка Cannot read property 'setState' of undefined, но что не так?

export default class SearchBar extends React.Component{
    render(){
        return(
            <div className='searchBar'>
                <input
                    className='searchInput'
                    type='text'
                    placeholder='Look for...'
                    onChange={this.props.onSearch}
                />
            </div>
        );
    };
};

export default class HotelCard extends React.Component{
    render(){
        const {
            name,
            description,
            image
        } = this.props;

        return (
            <div className='col-md-4'>
                <div className='card'>
                    <div className='card-image'>
                        <img className='img-responsive' src={image}/>
                        <div className='shadow'><button className='btn btn-primary btn-round'>Подробнее</button></div>
                    </div>
                    <div className='card-content'>
                        <h5>{name}</h5>
                        <p>
                            {
                                description.length > MAX_DESCRIPTION_LENGTH ? description.substring(0, MAX_DESCRIPTION_LENGTH) + '...' : description
                            }
                        </p>
                        <button className='btn btn-accent'>Buy</button>
                    </div>
                </div>
            </div>
        );
    };
};

export default class App extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            displayedHotels: HOTELS
        };
    }

    handleSearch(e){
        const searchQuery = e.target.value.toLowerCase();

        const displayedHotels = HOTELS.filter(hotel => {
            const searchString = hotel.name.toLowerCase() + hotel.description.toLowerCase();

            return searchString.indexOf(searchQuery) !== -1;
        });

        this.setState({displayedHotels: displayedHotels});
    }

    render(){
        const hotelCards = this.state.displayedHotels.map(hotel =>
            <HotelCard
                image={hotel.image}
                name={hotel.name}
                description={hotel.description}
            />
        );

        return(

            <div>
                <div className='col-md-12'>
                    <SearchBar onSearch={this.handleSearch}/>
                </div>


                <div>
                    {hotelCards}
                </div>
            </div>

        );
    };
};

Answer 1

[Demid Borodin]

А еще можно записать в конструкторе App.

this.handleSearch = this.handleSearch.bind(this);

В Open-Source библиотеках которые я видел, используется именно такой метод.
А вообще, дам совет, если у вас что-то не получается, идем в Google и пишем "reactjs + функция которая не работает + es6" именно по вашей проблеме есть уже несколько решенных вопросов.

Comments

[Ilya]

Спасибо за совет, приму на будущее

[Demid Borodin]

Я немного с опозданием, но если вы до сих пор досконально не разобрались в этом моменте, то прошу сюда learn.javascript.ru/bind

Answer 2

[Алексей Зуев]

Попробуйте вот так написать

<SearchBar onSearch={this.handleSearch.bind(this)}/>

Comments

[Ilya]

Спасибо за помощь)

[Никита Гущин]

Илья: таким образом биндить на this - очень плохая практика, не стоит так делать. Используйте способ, который вам выше предложили. Вот тут есть еще один - Почему setState не работает в данном случае?