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