TypeError: this.props.searchYelp не является функцией?

Просто чтобы вы знали, что я новичок в javascript и react.js. Я работаю над проектом Codecademy, и я застрял на коде ошибки.

Код ошибки, который я получаю:


    TypeError: this.props.searchYelp is not a function. (In 'this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy)', 'this.props.searchYelp' is undefined)

    handleSearch
    src/components/SearchBar/SearchBar.js:26
      23 | }
      24 | 
      25 | handleSearch(event) {
    > 26 |     this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
   ^  27 |     event.preventDefault();
      28 | }
      29 | 

enter code hereView compiled


Мой код SearchBar.js:


    import React from 'react';
    import './SearchBar.css';

    const sortByOptions = {
        'Best Match' : 'best_match',
        'Highest Rated' : 'rating',
        'Most Rated' : 'review_count'
    };

    class SearchBar extends React.Component {

        constructor(props) {
            super(props);
            this.state = {
                terms:'',
                location:'',
                sortBy:'best_match'
            };

            this.handleTermChange = this.handleTermChange.bind(this);
            this.handleLocationChange = this.handleLocationChange.bind(this);
            this.handleSearch = this.handleSearch.bind(this);
        }

        handleSearch(event) {
            this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
            event.preventDefault();
        }

        handleTermChange(event) {
            this.setState({ term: event.target.value });
        }

            handleLocationChange(event) {
            this.setState({ location: event.target.value });
        }

        getSortByClass(sortByOption) {
            if (sortByOption === this.state.sortBy) {
                return 'active';
            }
            return '';
        }

        handleSortByChange(sortByOption) {
            this.setState({ sortBy: sortByOption });
        }




        renderSortByOptions() {
            return Object.keys(sortByOptions).map(sortByOption => {
                let sortByOptionValue = sortByOptions[sortByOption];
                return <li key={sortByOptionValue} onClick={this.handleSortByChange.bind(this, sortByOptionValue)} className={this.getSortByClass(sortByOptionValue)} >{sortByOption}</li>
            });
        }


        render() {
            return (
                <div className="SearchBar">
                    <div className="SearchBar-sort-options">
                        <ul>
                            {this.renderSortByOptions()}
                        </ul>
                    </div>
                    <div className="SearchBar-fields">
                        <input placeholder="Search Businesses" onChange={this.handleTermChange} />
                        <input placeholder="Where?" onChange={this.handleLocationChange} />
                    </div>
                    <div className="SearchBar-submit">
                        <a onClick={this.handleSearch} href="www.#.com">Let's Go</a>
                    </div>
                </div>
            );
        }
    }

    export default SearchBar;


Мой код App.js:


    import React, { Component } from 'react';
    import './App.css';
    import SearchBar from './components/SearchBar/SearchBar';
    import BusinessList from './components/BusinessList/BusinessList';

    const business = {
      imageSrc: 'https://s3.amazonaws.com/codecademy-content/programs/react/ravenous/pizza.jpg',
      name: 'MarginOtto Pizzeria',
      address: '1010 Paddington Way',
      city: 'Flavortown',
      state: 'NY',
      zipCode: '10101',
      category: 'Italian',
      rating: 4.5,
      reviewCount: 90
    };

    const businesses = [business, business, business, business, business, business];

    class App extends Component {

      seachYelp(term, location, sortBy) {
        console.log(`Searching Yelp with ${term}, ${location}, and ${sortBy}`);
      }

      render() {
        return (
          <div className="App">
            <h1>ravenous</h1>
            <SearchBar searchYelp={this.searchYelp} />
            <BusinessList businesses={businesses} />
          </div>
        );
      }
    }

    export default App;


Кто-нибудь может мне помочь? Где я ошибся?

Я гуглил свой код ошибки и не могу найти решение…

Кроме того, пожалуйста, дайте мне знать, если вам потребуется дополнительная информация...

Спасибо!

Кэти

Является ли searchYelp функцией? если да то где?

Damini Ganesh 22.05.2019 14:42

Ошибка правильная. В вашем классе searchYelp нет функции SearchBar

josemartindev 22.05.2019 14:44

Где вы рендерите SearchBar? Пожалуйста, покажите нам

Vencovsky 22.05.2019 14:44

пожалуйста, поделитесь кодом JSX, что-то вроде <SearchBar searchYelp={()=>{//UR CODE} } /> поделитесь своим app.js или User.js файлом, пожалуйста, stackoverflow.com/questions/31141444/…

Ashish Kamble 22.05.2019 14:49

Можете ли вы поделиться своим файлом App.js?

obscure 22.05.2019 14:50
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
5
1 028
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Здесь вы визуализируете свою панель поиска и передаете состояние своей функции, привязка this как использование этого контекста в другом дочернем компоненте, Yelp — еще одна объявленная константная переменная.

Ваш app.js должен выглядеть так:

class App extends React.Component {
constructor(props){
super(props);
this.state = {
 businesses:[]
};
this.searchYelp = this.searchYelp.bind(this);
}

searchYelp(term, location, sortBy){


       Yelp.search(term,location,sortBy)
       .then(businesses=>{this.setState
       ({
               businesses:businesses});
       });

   } 

  render() {
    console.log(this.state.businesses);    
    return (
      <div className="App">
        <h1>ravenous</h1>
        <SearchBar searchYelp = {this.searchYelp}/>
        <BusinessList businesses={this.state.businesses}/>   
     </div>
    );
  }
}

export default App;

searchbar.js будет таким,

class SearchBar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      term: '',
      location: '',
      sortBy: 'best_match'
    };

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

    this.sortByOptions = {
      'Best Match': 'best_match',
      'Highest Rated': 'rating',
      'Most Reviewed': 'review_count'
    };
  }

  getSortByClass(sortByOption) {
    if (this.state.sortBy === sortByOption) {
      return 'active';
    }
    return '';
  }

  handleSortByChange(sortByOption) {
    this.setState({sortBy: sortByOption});
  }

  handleTermChange(event) {
    this.setState({term: event.target.value});
  }

  handleLocationChange(event) {
    this.setState({location: event.target.value});
  }

  handleSearch(event) {
    this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);

    event.preventDefault();
  }

  renderSortByOptions() {
    return Object.keys(this.sortByOptions).map(sortByOption => {
      let sortByOptionValue = this.sortByOptions[sortByOption];
      return (<li className={this.getSortByClass(sortByOptionValue)}
                  key={sortByOptionValue}
                  onClick={this.handleSortByChange.bind(this, sortByOptionValue)}>
                {sortByOption}
             </li>);
    });
  }

  render() {
    return (
      <div className="SearchBar">
        <div className="SearchBar-sort-options">
          <ul>
            {this.renderSortByOptions()}
          </ul>
        </div>
        <div className="SearchBar-fields">
          <input placeholder="Search Businesses" onChange={this.handleTermChange} />
          <input placeholder="Where?" onChange={this.handleLocationChange}/>
        </div>
        <div className="SearchBar-submit">
          <a onClick={this.handleSearch}>Let's Go</a>
        </div>
      </div>
    );
  }
}
export default SearchBar;

yelp.js будет таким,

const clientId = 'KnUCjsgC_SwsKbyWhoY_KQ';
const secret = 'H26mxyT3NsVNCTCLf21NjPtPI0PRWKZUIWbkyycSf1Pzv7xPOjh7wCz1YyiSEoaO';
let accessToken;

//object
const Yelp ={
    getAccessToken(){
        if(accessToken){
            return new Promise(resolve =>resolve(accessToken));
        } 
        return fetch(`https://cors-anywhere.herokuapp.com/https://api.yelp.com/oauth2/token?grant_type=client_credentials& client_id=${clientId}&client_secret=${secret}`,
        {method:'POST'
        }).then(response =>{
        return response.json();
        }).then(jsonResponse => {accessToken = jsonResponse.access_token;
      }); 
    },


    search(term, location, sortBy) {
    return Yelp.getAccessToken().then(() => {
      return fetch(`https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}`, {
        headers: {
          Authorization: `Bearer ${accessToken}`
        }
      });
    }).then(response => {
      return response.json();
    }).then(jsonResponse => {
      if (jsonResponse.businesses) {
        console.log(jsonResponse.businesses);
        return jsonResponse.businesses.map(business => ({
          id: business.id,
          imageSrc: business.image_url,
          name: business.name,
          address: business.location.address1,
          city: business.location.city,
          state: business.location.state,
          zipCode: business.location.zip_code,
          category: business.categories[0].title,
          rating: business.rating,
          reviewCount: business.review_count
        }));
      }
    });
  }
};
export default Yelp;

вам нужно проверить объявление вашей функции (searchYelp) и почему вы передали ее как реквизит? , вам нужно просто объявить его, а затем вызвать.

searchYelp=()=>{//what your function do}


 handleSearch(event) {
 this.searchYelp(this.state.term, this.state.location, this.state.sortBy);
            event.preventDefault();
        }

Объявление вашей функции ложно, попробуйте следующее:

 searchYelp=(term, location, sortBy)=>{


           Yelp.search(term,location,sortBy)
           .then(businesses=>{this.setState
           ({
                   businesses:businesses});
           });

       } 
Ответ принят как подходящий

Не волнуйтесь, я допустил опечатку в App.js, теперь он работает!

Спасибо, в любом случае!

Другие вопросы по теме