アキシャルを使用してajaxリクエストに反応する

Question

私はAxisを使ってajaxリクエストをしています。私はAJAXリクエストを作成し、なぜこのコードが機能していないのか理解していない初心者ですか？私はこの問題とは関係ないコードを削除しました。なぜなら、なぜ動作しないのかということです。エラーは "GET https://api.github.com/users/ $％7Bthis.sters.usersName％7D 404（見つかりません）"です。たぶん私は初期化されていません

<CardList Card={data} /> 

に

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

さてさて、URLの一部で間違っ要求...、

最初dataを書きますが、用カードの構成要素を無視しています瞬間。

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

は

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

する必要があり、私はあなたのいずれかがMyFormを内部でレンダリングする必要がありますカード用のデータを使用したい推測している、またはコールバックでのMyAppで状態を設定しますMyFormへ

上記のように、カードはインポートまたは定義されません。

github apiは値の辞書を返します。このマップは（直接）は機能しません。

は、私はあなたがチュートリアルを行くべきだと思う少しより密接

Answer 2

あなたは文字通りのテンプレートを使用しようとしているが、あなたは間違ってqoute template literal

を使用しているか、文字列連結することができます：

をテンプレートリテラル： `http://api.github.com/users/ $ {} this.state.userName

または contatenate文字列'http://api.github.com/users/' + this.state.userName'

そして、私はあなたがインポート場所を確認またはカードコンポーネントを宣言していない、はい観察