Axios Request Fehler beim Reagieren

Question

Ich bin nicht sicher, was ich hier falsch mache.

Ich möchte die Main Komponente InputForm, in der Ajax-Request-Methode untergeordnete Komponente zu übergeben, die die Ergebnisse zurückkommen würde, die in der Main Komponente Zustand gespeichert würden.

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.

ich nicht irgendwelche Ergebnisse & meine webpack Server die Seite aktualisiert.

Answer 1

Das Hauptproblem hier ist, dass Sie preventDefault nicht bei der Formularübergabe aufrufen. Auch die URL zu Github Repos war falsch, aber das ist zweitrangig.

die aktualisierte jsbin Check: 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> 
     ); 
    } 
}