AxiosからのデータへのアクセスGETリクエスト

Question

Axios GETリクエストからデータへのアクセスに問題があります。私は取得したすべてのデータを繰り返し、各ユーザーのユーザー名、アバター、スコアを表示するテーブルを作成することができます。私は現在、単一のユーザー名をレンダリングすることができるよ唯一の方法は、次のコードである：

this.setState({name: res.data[0].username}); 

しかし、上記のコードは、私がGET要求で使用するURLの最初のオブジェクトへのアクセスを提供します。このコードを使用する場合：

this.setState({name: JSON.stringify(res.data)}); 

私はオブジェクト全体を文字列としてレンダリングすることができます。だから、私は私のレンダリングメソッドを更新する必要があると思うが、私はどのようにわからない。

各ユーザーのデータをテーブルまたはリストに設定してレンダリングしている状態をマップできるようにするための手順はありますか。あなたは正しい軌道に乗っている

class LeaderBoard extends React.Component { 

constructor(props) { 
    super(props) 
    this.state = { 
    name: [] 
      } 
    } 

componentDidMount(){ 

axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent').then(res => 
{ 

this.setState({name: res.data[0].username}); 
    }); 

} 


render() { 

return (
    <div> 
    <h1>{this.state.name}</h1> 

    </div> 
) 
} 
} 


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

Answer 1

は、あなただけのいくつかの重要な部分を逃しています。

ステップ1：あなたの状態に

を配列全体を追加します。私はあなたのデータの正確な構造のわからないんだけど、あなたはおそらく、あなたが持っている今、この

componentDidMount(){ 

axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent').then(res => 
{ 

this.setState({data: res.data}); 
    }); 

} 

をしたいですあなたの状態で作業したいすべてのデータ、繰り返し処理できる状態。

ステップ2：あなたは

ここにこのコードをしたいJSX要素を作成するために.map()を使用しては：

render() { 

return (
    <div> 
    <h1>{this.state.name}</h1> 
    </div> 
) 
} 
} 

ここでの大きな障害は、それだけで今までので、事をレンダリングすることです、まあ、それはすべてあります。あなたがしたいのは.map()です。あなたのデータからたくさんの名前を作っていますよね？

これは、このようになります。

render() { 
    const namesToRender = this.state.data.map(val => { 
    return (
     <h1>val.username</h1> 
    ) 
    }) 
    return (
     <div> 
     {namesToRender} 
     </div> 
    ) 
    } 
} 

このすべてが言っている「は、そのデータを通過し、私一人一人の名前を与えると、いくつかの<h1>タグでラップして、それを吐き出す」です。