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}/>

组件没有根据状态变化重新呈现吗？

1 个答案: