Question

我是新来的反应者。在我的程序中，要求用户单击一个按钮，然后根据该按钮更改状态。

这是呈现的部分：

<button onClick={this.togglePage(2)}>Click Here</button>

这是之前的部分：

  constructor(props) {
    super(props);
    this.togglePage = this.togglePage.bind(this);

    this.state = {
      currentpage: 1,
    };
  }
  togglePage(page) {
    this.setState({
      currentpage: page,
    });
  }

我在此处传递值的方式是否正确？我收到一条错误消息：“已超过最大更新深度”

Answer 1

您需要传递函数，而不是立即调用

 <button onClick={() => this.togglePage(2)}>Click Here</button>

按照当前的编写，您在渲染中调用togglePage，这会导致状态更新和重新渲染，从而使调用栈崩溃。

Answer 2

另一种方法是不要在构造函数中绑定它，而是将其绑定在按钮标签中，如下所示，

<button onClick={this.togglePage.bind(this,2)}>Click Here</button>

将变量传递给setState

2 个答案: