検索クエリでAjax呼び出しが機能しない

Question

githubプロファイルビューアがあり、ユーザー名でプロファイルを検索することができます。デフォルトの状態では、自分のgithubユーザー名を入力して、リンク先ページが自分のgithubプロファイルになるようにします。検索バーに名前を入力してプロファイルを検索することはできますが、ユーザを検索しようとするたびにajaxコールが機能しませんが、同じ機能が自分のユーザ名の有効なデータを返しています。次のように私は取得していますエラーがある： -

Uncaught TypeError: $.ajax is not a function

class App extends Component{ 

    constructor(props){ 
     super(props); 
     this.state = { 
      username: 'kinny94', 
      userData: [], 
      userRepos: [], 
      perPage: 5 
     } 
    } 

    getUserData(){ 
     $.ajax({ 
      url: 'https://api.github.com/users/' + this.state.username + '?client_id=' + this.props.clientId + '&client_secret=' + this.props.clientSecret, 
      dataType: 'json', 
      cache: false, 
      success: function(data){ 
       this.setState({ 
        userData: data 
       }); 
       console.log(data); 
      }.bind(this), 
      error: function(xhr, status, err){ 
       this.setState({ 
        username: null 
       }); 
       alert(err); 
      }.bind(this) 
     }); 
    } 

    getUserRepos(){ 
     $.ajax({ 
      url: 'https://api.github.com/users/' + this.state.username + '/repos?per_page='+ this.state.perPage +'client_id=' + this.props.clientId + '&client_secret=' + this.props.clientSecret + '&sort=created', 
      dataType: 'json', 
      cache: false, 
      success: function(data){ 
       this.setState({ 
        userRepos: data 
       }); 
      }.bind(this), 
      error: function(xhr, status, err){ 
       this.setState({ 
        username: null 
       }); 
       alert(err); 
      }.bind(this) 
     }); 
    } 

    handleformSubmit(username){ 
     this.setState({ 
      username: username 
     }, function(){ 
      this.getUserData(); 
      this.getUserRepos(); 
     }) 
    } 

    componentDidMount(){ 
     this.getUserData(); 
     this.getUserRepos(); 
    } 

    render(){ 
     return(
      <div> 
       <Search onFormSubmit={this.handleformSubmit.bind(this)}/> 
       <Profile {...this.state}/> 
      </div> 
     ) 
    } 
} 

export default App; 

を次のように私の主なApp.jsxクラスがあると

class Search extends Component{ 

    onSubmit(e){ 
     e.preventDefault(); 
     let username = this.refs.username.value.trim(); 
     if(!username){ 
      alert('Please Enter a username!'); 
      return; 
     } 

     this.props.onFormSubmit(username); 
     this.refs.username.value = ''; 
    } 

    render(){ 
     return(
      <div> 
       <form onSubmit={this.onSubmit.bind(this)}> 
        <label>Search Github Users </label> 
        <input type="text" ref="username" className="form-control" /> 
       </form> 
      </div> 
     ) 
    } 
} 

私の質問を次のように私の検索ファイルがあります同じajaxが私のユーザ名のために働いていれば、それはなぜ新しいランダムなユーザ名を扱っていないのですか？

Answer 1

私はこの問題を考え出しました。私はslimとcompressedの正規バージョンjqueryの両方を使用していました。 ajaxはslimバージョンのjqueryには含まれていないので、削除して、代わりに通常のjqueryを使用しました。魅力的に働いた。 :)

Answer 2

あなたのhtmlにjqueryスクリプトを含める必要があります。あなたのhtmlでこのよう

何か：

<script src="jquery-3.2.1.min.js"></script>