javascript - 组件没有在状态更改时重新渲染？

Question

我正在创建一个随机报价生成器。有一个引用框，显示引用和作者姓名。我创建了一个在单击按钮时调用的方法，该方法可以随机化报价列表并显示新报价和下一个按钮以从我的报价列表中获取下一个报价。我可以看到第一个报价，但该组件在单击按钮时没有重新渲染，或者出现问题导致我无法获取下一个报价或无法随机化。这是代码:

class UI_qoutebox extends React.Component {
constructor(props) {
    super(props);
    this.state = { qoutes: props.qoutes, authors: props.authors, num: 0 };
    this.UI_rq = this.UI_rq.bind(this);
    this.UI_next = this.UI_next.bind(this);
}
UI_rq() {
    let rnd = Math.floor(Math.random() * this.state.qoutes.length);
    this.setState({ num: rnd });
}
UI_next() {
    let p = this.state.num + 1;
    if (p > this.state.qoutes.length) { p = 0 }
    this.setState({ num: p })
}
render() {
    const { qoutes, authors, num } = this.state;
    return (
        <div className="qoute-box">
            <span className="qoute">{qoutes[num]}</span>
            <span>{authors[num]}</span>
            <input type="button" value="Randomize" onClick={() => this.UI_rq} />
            <input type="button" value="Next" onClick={() => this.UI_next} />
        </div>
    )
}

}

我正在从事 Freecodecamp 的项目，我需要快速帮助。提前致谢。

Answer 1

改变这个

<input type="button" value="Randomize" onClick={this.UI_rq}/>
<input type="button" value="Next" onClick={this.UI_next}/>