React.js渲染json響應，coetch或axios

Question

我一直拉我的頭髮太長，我不能再集中。

我想從網址中取出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; 

我也檢索使用

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公司開始響應。 「

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函數調用，並有回調的設置狀態進行查看。

如果你使用獲取，您的組件可能是這樣的：

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> 
} 
}