Reagieren Ajax-Anfrage mit Axios

Question

Ich benutze Axios, um eine Ajax-Anfrage zu machen. Ich bin ein Neuling für Ajax-Anfrage und nicht verstehen, warum dieser Code nicht funktioniert? Ich habe einen Code gelöscht, der nichts mit dieser Frage zu tun hat, warum es nicht funktioniert. Der Fehler wird angezeigt "GET https://api.github.com/users/ $% 7Bthis.state.usersName% 7D 404 (nicht gefunden)". Ich schreibe die Anfrage vielleicht falsch in der URL Teil ...

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 
import axios from 'axios'; 

const Card = (props) => { 
    return(
     <div style={{margin: '1em'}}> 
      <img src={props.Avatar_URL} width="120px"/> 
      <div> 
       <div>{props.Name}</div> 
       <div>{props.Company}</div> 
      </div> 
     </div> 
    ); 

}; 

const CardList= (props) => { 
    return(
     <div> 
      {props.Card.map(card => <Card {...card}/>)} 
     </div> 

    ); 
}; 

class MyForm extends React.Component{ 
    state = { userName: '' } 
    handlesSubmit = (event) => { 
     event.preventDefault(); 
     console.log('Event: Form Submitted:', this.state.userName); 
     axios.get("api.github.com/users/" + this.state.userName).then(response => { 
      console.log(response); 
     }) 

    }; 
    render(){ 
     return(
      <form onSubmit={this.handlesSubmit}> 
       <div style={{margin: '1em'}}> 
        <input type="text" placeholder="@Github" 
           value={this.state.userName} 
           onChange={(event) => this.setState({ userName: event.target.value})}/> 
        <button type="submit">Search</button> 
       </div> 
      </form> 
     ); 
    }; 
}; 

class MyApp extends React.Component{ 
    render(){ 
     return(
      <div> 
       <MyForm /> 
       <CardList Card={data} /> 
      </div> 
     ); 
    }; 
}; 

let data = [ 
    { 
     Avatar_URL: "https://avatars2.githubusercontent.com/u/35?v=4", 
     Name: "Kevin Williams", 
     Company: "Oracle" 
    }, 
    { 
     Avatar_URL: "https://avatars2.githubusercontent.com/u/36?v=4", 
     Name: "Dave Fayram", 
     Company: "Udacity, Inc" 
    } 
] 

ReactDOM.render(
    <MyApp />, 
    document.getElementById('root') 
); 

Answer 1

Na gut dann,

erste data in

<CardList Card={data} /> 

nicht initialisiert wird, aber ignoriert die Kartenkomponente für ein Moment.

axios.get('http://api.github.com/users/${this.state.usersName}') 

sollte

axios.get('http://api.github.com/users/' + this.state.userName) 

Und ich bin zu raten Sie die Daten für eine Karte verwenden möchten, die Sie entweder wird innerhalb MyForm, oder setzen Sie mit einem Rückruf einen Zustand, in MeineAnw haben zu machen in MyForm

Wie oben erwähnt Karte wird nicht importiert oder definiert.

Die GitHub API gibt ein Wörterbuch mit Werten zurück, die nicht (direkt) funktionieren.

Ich glaube, Sie durch das Tutorial ein bisschen mehr gehen sollte eng

Answer 2

Sie versuchen Vorlage wörtliche zu verwenden, aber Sie verwenden den falschen qoute template literal

oder Sie können die Zeichenfolge verketten:

Vorlage wörtliche: `http://api.github.com/users/ $ {} this.state.userName

oder contatenate String 'http://api.github.com/users/' + this.state.userName'

Und ich sehe nicht, wo Sie die Karte Komponente importieren oder erklären, ja eine Beobachtung