reactjsでapiを呼び出す

Question

私はちょうどreactを学び始めています。現時点では、私はいくつかのハードコードされたデータを私のアプリケーションに供給しています。私はそれをいくつかの外部APIに置き換え、それに応じてデータをロードしたいと思っています。これまで私が行ってきたことは次のとおりです。

import axios from "axios"; 
class TodoStore extends EventEmitter{ 
    constructor() { 
     super(); 
     this.todos = [ 
      { 
       id: 123, 
       text: "Go Shopping", 
       complete: false 
      }, 
      { 
       id: 456, 
       text: "Pay Bills", 
       complete: false 
      } 
     ]; 
    } 

getAll(){ 
     return this.todos; 
    } 

は今、私が何をしたいのか、私はhttps://jsonplaceholder.typicode.com/todosを実装し、私のtodosにすべて返された結果を割り当てたいです。では、そうする正しい方法は何でしょうか？どんな助けもありがとう。

import axios from "axios"; 
class TodoStore extends EventEmitter{ 

      componentDidMount() { 

       axios.get('your url') 
       .then(function (response) { 
       this.setState({ 
        todos : response 
       }); 
       /// and you can get response with this.state.todos in your class 
       }) 
      .catch(function (error) { 
       console.log(error); 
      }); 

      } 


    } 

Answer 1

最初にすることは状態を反応させ使用して、あなたがreact Life Cycleを知っている必要がありますしてくださいです。ちょうど反応し始めたので、おそらく変化する状態と小道具に反応するだけで遊んでみたいです。

あなたは直接axiosをcomponentDidMount or componentWillMountに取得し、反応コンポーネントに状態を保存することができます。

あなたのプロジェクトが成長するにつれて、Reduxを実装するような、今後の実証可能で保守しやすいソリューションを試してみてください。

Answer 2

あなたが欲しいものを達成することができますので、多くの方法があります：私はあなたのことを言うべき

Answer 3

フレームワーク（ReduxやRelayなど）を使用していない場合は、componentDidMountが最適です。反応からComponent Docs：

componentDidMount（）は、コンポーネントがマウントされた直後に呼び出されます。 DOMノードを必要とする初期化はここに行かなければなりません。リモートエンドポイントからデータをロードする必要がある場合は、ネットワークリクエストをインスタンス化するのに適しています。このメソッドで状態を設定すると、再描画がトリガーされます。

あなたのクラスは次のようになります：

import axios from "axios"; 

class TodoStore extends EventEmitter{ 
    constructor() { 
     super(); 
     this.state = { todos: []} //initial todos - an empty array in state 
    } 

    componentDidMount() { 
     axios.get('https://jsonplaceholder.typicode.com/todos') 
     .then(function (data) { 
      this.setState({ 
       todos: data //set the received todos to state 
      }) 
     }) 
     .catch(function (error) { 
      console.log(error); 
     }); 
    } 

    getAll(){ 
     return this.state.todos; //get todos from state 
    } 
} 

その他の状態に：https://facebook.github.io/react/docs/state-and-lifecycle.html