无法使用setState或forceUpdate重新呈现/刷新组件

Question

我正在使用React构建一个web应用程序，它将在用户每次单击按钮时显示不同的报价。我一直在寻找一种方法，让组件quotegenerator在单击按钮时重新呈现/刷新，我尝试了本文中介绍的所有可能性，但都没有成功。

class QuoteGenerator extends React.Component {
  constructor(props) {
        super(props);
        this.state = {num: Math.floor(Math.random() * quotes.length)};
    }

  render() {
    return(
      <div class="quoteBox">
        <div class="quote">
          "{quotes[this.state.num][0]}"<br/>
        </div>
        <button class="button btn" onClick={this.forceUpdate}>New Quote</button>
      </div>
    );
  }
}

即使创建运行this.forceupdate()或this.setstate()的单独函数，并使用onclick调用该函数，也不起作用；我想我一定是执行错了什么。有没有人知道我的错误在哪里？

Answer 1

看来你只选了一次报价。构造函数将在组件实例化时运行，但不会在每次单击时运行。

添加方法：

nextQuote() {
  this.setState({
    num: Math.floor(Math.random() * quotes.length),
  });
}

并从您的onclick中调用它（小心使用this)。

通常情况下，您应该尽量避免使用forceupdate()，只从render()中的this.props和this.state读取。