为什么此React应用仅在打开开发工具的情况下才更新新内容?

时间:2019-04-04 20:18:48

标签: reactjs axios

我有一个小型的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>
    )
  }

如果我单击按钮,则只有在关闭开发工具的情况下才能获得第一个结果,并且随后的单击不会加载新数据。但是如果开发工具是打开的,则可以正常工作。

我们将非常感谢您的帮助。 谢谢。

0 个答案:

没有答案