约定是在
componentDidMount生命周期方法中进行AJAX调用。看看React文档：https : //facebook.github.io/react/tips/initial-
ajax.html
通过AJAX加载初始
数据在componentDidMount中获取数据。响应到达时，将数据存储在状态下，触发渲染以更新您的UI。
因此，您的代码将变为：https :
//jsbin.com/cijafi/edit?html,js,output
class App extends React.Component { constructor() { super(); this.state = {data: false} } componentDidMount() { axios.get('https://jsonplaceholder.typipre.com/posts') .then(response => { this.setState({data: response.data[0].title}) }); } render() { return ( <div> {this.state.data} </div> ) }}ReactDOM.render(<App />, document.getElementById('app'));这是另一个演示（http://prepen.io/PiotrBerebecki/pen/dpVXyb），展示了使用1）jQuery和2）Axios库实现此目的的两种方法。
完整代码：
class App extends React.Component { constructor() { super(); this.state = { time1: '', time2: '' }; } componentDidMount() { axios.get(this.props.url) .then(response => { this.setState({time1: response.data.time}); }) .catch(function (error) { console.log(error); }); $.get(this.props.url) .then(result => { this.setState({time2: result.time}); }) .catch(error => { console.log(error); }); } render() { return ( <div> <p>Time via axios: {this.state.time1}</p> <p>Time via jquery: {this.state.time2}</p> </div> ); }};ReactDOM.render( <App url={"http://date.jsontest.com/"} />, document.getElementById('content'));
