Question

我使用React构建一个Web应用程序，每次用户单击一个按钮时都会显示不同的引号。我一直在寻找一种方法让我的组件QuoteGenerator在按钮点击时重新渲染/刷新，我已经尝试了this article中提供的所有可能性而没有成功。

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）。

注意：您通常不需要在react组件上调用forceUpdate。只需致电setState，告诉React改变了什么，更新将自行完成。来自文档：

通常，您应该尽量避免使用forceUpdate()，并且只能在this.props中的this.state和render()阅读。

Answer 2

如果要渲染组件而不是使用config.Queues.MaxDequeueCount，则应使用setState。

您可以参考ReactJS官方文档进行验证，因为这不是一个好习惯。

https://reactjs.org/docs/react-component.html#forceupdate

每次单击按钮时，都可以将自定义方法写入setState。也不确定引用值来自哪里:)

希望这很有用。

this.forceUpdate()

Answer 3

不确定onClick={this.forceUpdate}是否有适当的背景来完成其工作。我将它包装在内联函数中，在this

中传递上下文（es6）或绑定constructor上下文

<button class="button btn" onClick={() => this.forceUpdate()}>New Quote</button>

此外，全局quotes对象似乎是一个糟糕的模式，您应该将其提供给您的组件props

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

3 个答案: