Ошибка типа: this.props.searchYelp не является функцией? - PullRequest
Новая
       27

Ошибка типа: this.props.searchYelp не является функцией?

0 голосов
/ 22 мая 2019

Точно так же вы знаете, что я новичок в javascript и реагируем на jj.Я работаю над проектом из 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;

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

У меня в Google мой код ошибки, и я не могу найти решение ...

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

Спасибо!

Кэти

Ответы [ 4 ]

0 голосов
/ 23 мая 2019

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

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

0 голосов
/ 22 мая 2019

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

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


 handleSearch(event) {
 this.searchYelp(this.state.term, this.state.location, this.state.sortBy);
            event.preventDefault();
        }
0 голосов
/ 22 мая 2019

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

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


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

       }
0 голосов
/ 22 мая 2019

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

Ваш 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;
...