Axiosでのリクエストの失敗

Question

ここで間違っていることはわかりません。

コンポーネントを、子コンポーネントInputFormにajaxリクエストメソッドで渡して、Mainコンポーネント状態に格納される結果を返します。

class Main extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      fetching : false, 
      repos : {} 
     }; 
     this.getGitHubRepo = this.getGitHubRepo.bind(this); 
    } 
    getGitHubRepo(user){ 
     this.setState({ fetching : true }); 
     console.log("form submitted!", user); 
     axios.get(user) 
      .then((response) => { 
       console.log("response =>", response); 
      }) 
      .catch((error) => { 
       console.log("error => ", error); 
      }); 
    } 
    render(){ 
     return(
      <div className = "appContainer"> 
       <InputForm getGitHubRepo = { this.getGitHubRepo } /> 
      </div> 
     ); 
    } 
} 



class InputForm extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state = { 
      inputValue : "", 
     }; 
     this.recordInput = this.recordInput.bind(this); 
    } 
    recordInput(e){ 
     this.setState({ inputValue : e.target.value }); 
    } 
    render(){ 
     let getPath = `https://api.github.com/${this.state.inputValue}`; 
     return(
      <form onSubmit = {() => this.props.getGitHubRepo(getPath)}> 
       <label htmlFor = "user_input"> 
        Github Username 
       </label> 
       <input id = "user_input" 
         type = "input" 
         onChange = { this.recordInput } /> 
       <input type = "submit" value = "get repos" /> 
      </form> 
     ); 
    } 
} 


ReactDOM.render(<Main />, document.getElementById("app")); 

Here is the jsbin link.

私はWebPACKのサーバーがページを更新&任意の結果を得るいけません。

Answer 1

ここでの主な問題は、フォームの送信時にpreventDefaultを呼び出さないことです。 また、github reposを取得するURLは間違っていましたが、それは二次的なものです。

更新jsbinチェック：https://jsbin.com/sujakexamo/1/edit?js,output

class InputForm extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state = { 
      inputValue : "", 
     }; 
     this.recordInput = this.recordInput.bind(this); 
     this.submit = this.submit.bind(this); 
    } 

    recordInput(e){ 
     this.setState({ inputValue : e.target.value }); 
    } 

    submit (e) { 
     e.preventDefault(); 
     this.props.getGitHubRepo(`https://api.github.com/users/${this.state.inputValue}/repos`); 
    } 

    render(){ 
     return(
      <form onSubmit = {this.submit}> 
       <label htmlFor = "user_input"> 
        Github Username 
       </label> 
       <input id = "user_input" 
         type = "input" 
         onChange = { this.recordInput } /> 
       <input type = "submit" value = "get repos" /> 
      </form> 
     ); 
    } 
}