将变量传递给 setState答案

【问题标题】：Passing Variable to setState将变量传递给 setState
【发布时间】：2023-03-31 22:30:01
【问题描述】：

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

这是渲染部分：

<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,
    });
  }

我在这里传递值的方式是否正确？我收到一条错误消息，提示“超出最大更新深度”

【问题讨论】：

标签： javascript reactjs setstate

【解决方案1】：

你需要传递一个函数，而不是立即调用它

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

正如当前所写，您在渲染中调用 togglePage，这会导致状态更新和重新渲染导致调用堆栈崩溃。

【讨论】：

哦，我明白了。即使我没有传递值，这也会发生吗？像一个简单的切换（真/假）功能？
@DarkProfessor 如果您调用该函数而不是将其作为回调传递 - 那么是的。 onClick={fn} - 好的 onClick={fn()} - 不行，除非 fn 返回一个新函数 :)
如果您在render 中使用箭头函数，这将变得多余。如果您需要创建多个具有不同值的togglePage 回调，您可以通过创建makePageToggler(currentpage){ return () => this.setState({ currentpage })} 并将其称为onClick={this.makePageToggler(2)} 来重写您的代码
你没有。正如函数名称bind() 所暗示的那样，该语句用于将上下文this 的名称togglePage 绑定到您实现的函数togglePage。不过，您可以用这种方式编写该函数：togglePage = (page) => { ... }，并且您不需要任何绑定
注意makePageToggler的情况下可以调用，因为它返回一个新函数。

【解决方案2】：

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

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

【讨论】：