Axios AJAXの呼び出し元の状態だけを返す

Question

AxiosをReactで使って簡単なAJAX呼び出しをしようとしていますが、どこが間違っているのか分かりません。

ComponentDidMount() { 
    axios.get('https://jsonplaceholder.typicode.com/users') 
     .then(res => { 
     const users = res 
     this.setState({ users }); 
     }); 
} 

render() { 
    console.log(this.state.users) // returns the **initialised EMPTY array** 
    return (
    <div> 
     {this.state.users.map(user => <p>{user.name}</p>)} // returns nothing 
    </div> 
    ) 
} 

私は.get()法で指定されたURLに単純な配列にアクセスしています（必要であれば、それは構造だ見るためにそれをチェックアウト）：ここで

は、私がこれまでのところ（私のコンポーネント内で）持っているものです。私は次に.then()の約束を連鎖させ、res引数を矢印の関数に渡します。

次に、users変数を結果に代入し、このように状態を設定しようとします。 この時点で私はthis.state.usersが結果の配列と等しくなることを期待しています。

しかし...

A）私ははconsole.log（this.state.usersを）しようとすると、私はのマップをレンダリングしようとすると、それが初期化空の配列

B）を返します。各オブジェクトのnameプロパティを繰り返し処理します。

どこが間違っていますか？

Answer 1

ミス（ファイグエンに述べたように）、修正するためにいくつかの他のものから部分：

1）Axiosは、応答オブジェクトとの約束を解決します。だから、あなたがする必要がある結果を得るために：

axios.get('https://jsonplaceholder.typicode.com/users') 
    .then(res => { 
     const users = res.data; // Assuming the response body contains the array 
     this.setState({ users }); 
    }); 

は、ここではレスポンスオブジェクトについてのドキュメントをチェックアウト：https://github.com/mzabriskie/axios#response-schema

2）例外がある場合（あなたの要求が失敗した）あなたは、おそらく代わりに、それを処理したいですそれを飲み込む従って：

axios.get('https://jsonplaceholder.typicode.com/users') 
    .then(res => { 
    const users = res.data; // Assuming the response body contains the array 
    this.setState({ users }); 
    }) 
    .catch(err => { 
     // Handle the error here. E.g. use this.setState() to display an error msg. 
    }) 

Answer 2

typo。 ComponentDidMountの代わりにcomponentDidMountにする必要があります。