我刚刚开始查看reactjs并尝试从API检索数据:
constructor(){ super(); this.state = {data: false} this.nextProps ={}; axios.get('https://jsonplaceholder.typicode.com/posts') .then(response => { nextProps= response; }); }
当promise返回数据时,我想将其分配给状态:
componentWillReceiveProps(nextProps){ this.setState({data: nextProps}) }
如何使用从API接收到的数据更新状态?此刻状态未设置?
jsbin参考:https ://jsbin.com/tizalu/edit ? js,控制台,输出
约定是在componentDidMount生命周期方法中进行AJAX调用。看看React文档:https : //facebook.github.io/react/tips/initial- ajax.html
componentDidMount
通过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.typicode.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://codepen.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') );