ReactとAxiosでRESTfulなデータを使用する

Question

https://api.github.com/search/users?q=jasonからデータを取得してReactでレンダリングするにはどうすればよいですか？私は次のようなものを試しました：

constructor(){ 
    this.state = { 
    data: []    
    }; 
} 

componentDidMount(){ 
    axios.get("https://api.github.com/search/users?q="+_searchTerm) 
       .then(res => { 
        this.setState({ 
         data: _.values(res.data.items) 
        }) 
       }); 
} 


render() { 
    const listProducts = this.state.data.map((product) => 
    <li key={product.toString()}>{product}</li> 
); 

    return (
    <div> 
     <ul>{listProducts}</ul>  
    </div> 
    ); 
} 

しかし、うまくいきませんでした。

未処理拒否（不変違反）： オブジェクトはリアクションの子としては無効です（見つかった：キー{ログイン、ID、avatar_url、gravatar_id、...のオブジェクト）。 子コレクションをレンダリングする場合は、代わりに配列を使用するか、ReactアドオンのcreateFragment（object）を使用してオブジェクトをラップします。

だから、私は配列への応答を変換する必要があると思います。しかし、私はそれをやる方法があまりにもわかりません。

Answer 1

コンポーネントまたは文字列ではなくオブジェクトを返します。

これを変更します。この

// you need to set key to a unique string like id 
const listProducts = this.state.data.map((product) => 
    <li key={product.id}>{JSON.stringify(product)}</li> 
);