我有一个小型的React应用,当单击按钮时可获取新内容。由于某些原因,它仅在chrome dev-tool打开的情况下更新状态。我正在使用axios来获取内容。我很确定自己在那儿做错了。我不得不说,我是React的新手,正在尝试学习。
这是我的代码。
class QuoteBox extends React.Component {
constructor(){
super();
this.state = {
quotes: '',
author:'',
isLoading: false
}
this.handleRequest = this.handleRequest.bind(this)
}
handleRequest(e){
e.preventDefault();
this.setState({isLoading: true});
axios.get(`https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback="`)
.then(res => this.setState({
quotes: res.data[0].content,
isLoading: false
})
);
}
这是渲染方法
render() {
return (
<div>
<div className='box'>
<div className="text">
{parser(this.state.quotes)}
</div>
<p className="author">- {this.state.author.toUpperCase()}</p>
<footer>
<div className="mediaIcons">
<i className="fab fa-twitter-square"></i>
<i className="fab fa-facebook-square"></i>
</div>
</footer>
</div>
<button className="btn btnQuote" onClick={this.handleRequest}>New Quote</button>
</div>
)
}
如果我单击按钮,则只有在关闭开发工具的情况下才能获得第一个结果,并且随后的单击不会加载新数据。但是如果开发工具是打开的,则可以正常工作。
我们将非常感谢您的帮助。 谢谢。