TypeError：this.props.searchYelp不是函数？

Question

只是因为你知道我是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;

---

有人能帮帮我吗？ 我哪里出错了？

我有谷歌我的错误代码，似乎无法找到解决方案......

另外，如果您需要更多信息，请告诉我......

谢谢！

凯蒂

Answer 1

在这里，您将渲染搜索栏并传递函数状态，将其绑定为在另一个子组件中使用此上下文，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;

Answer 2

你必须检查你的函数声明（searchYelp），为什么你把它作为道具传递？ ，你只需声明它然后调用它。

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


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

Answer 3

你的函数声明是错误的，试试这个：

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


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

       } 

Answer 4

别担心我在App.js中犯了一个拼写错误，它现在正在运行！

不管怎么说，还是要谢谢你！