React.jsはjsonレスポンス、コフェッチ、アキシャルを返します

Question

私は長い時間をかけて私の髪を引っ張ってきました。

私はURLからjsonを取り出し、ブラウザで視覚的にレンダリングしようとしています。私はこの障害を乗り越えるまで、少なくともフォーマットされている必要はありません。

console.logでコンソールに表示させることができますが、私はrenderメソッドにレスポンスを得ることができません。ページ上に何かが見えるようになるまで、以下のコードに簡略化しました。

import React, { Component } from 'react'; 
// import axios from 'axios'; 

var co = require('co'); 
co(function *() { 
var res = yield fetch('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackoverflow'); 
var json = yield res.json(); 
console.log(res); 
}); 

class App extends Component { 

render() { 
return (
    <div className="App"> 
    INSERT JSON HERE 
    </div> 
); 
} 
} 

export default App; 

また、私は男ああ、私は素晴らしいです誰？私は素晴らしいだからaxiosを使用するつもりだ」と思ったので、私はもともとaxiosを使用して開始

fetch('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackoverflow') 
    .then(function(res) { 
     return res.json(); 
    }).then(function(json) { 
     console.log(json); 
    }); 

を使用して応答を取得しています。 "

axios.get('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackoverflow') 
    .then(function(response) { 
    console.log(response.data); 
    }); 

しかし、今日は私がすごいわけではないので、それは間違っていました。

私は何でも手に入れよう！私の元の計画には、マップを使って "アイテム"を繰り返して、そのエリアの救いに近づけるようにすれば余分なポイントが含まれていました。

Answer 1

import React, { Component } from "react"; 
import axios from "axios"; 

const URL = "https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackoverflow"; 

export default class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     items: [] 
    } 
    } 

    componentDidMount() { 
    var _this = this; 
    axios.get(URL) 
    .then(function(res){ 
     _this.setState({ 
     items: res.data.items 
     }); 
    }) 
    .catch(function(e) { 
     console.log("ERROR ", e); 
    }) 
    } 

    render() { 
    const renderItems = this.state.items.map(function(item, i) { 
     return <li key={i}>{item.title}</li> 
    }); 

    return (
     <ul className="App"> 
     {renderItems} 
     </ul> 
    ); 
    } 
} 

Answer 2

これは、Reactのコンポーネントの状態とライフサイクルを通じて実行できます。ここでは、この程度

読む：React State/Lifecycle

あなたは、コンポーネントのcomponentDidMount機能でFETCH呼び出し、コールバックは表示の状態を設定しているを配置することができます。

あなたが取得を使用した場合、コンポーネントは次のようになります。

class App extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
    data: false 
    }; 
    this.receiveData = this.receiveData.bind(this); 
} 
componentDidMount() { 
    var _self = this; 
    fetch('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackoverflow') 
    .then(function(res) { 
    return res.json(); 
    }).then(function(json) { 
    console.log(json); 
    _self.receiveData(json); 
    }); 
} 
receiveData(data) { 
    this.setState({data}); 
} 
render() { 
    return <div>{this.state.data}</div> 
} 
}