Question

如何从两个不同的函数调用中修改状态？以下代码给出了错误＆＃39;超出最大更新深度。＆＃39;

class App extends Component {
   // fires before component is mounted
   constructor(props) {

    // makes this refer to this component
    super(props);

    // set local state
    this.state = {
        date: new Date(),
        myQuestions:myQuestion,
        counter :0,
        activeQuestion:-1,
    };
    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
    this.handleClick = this.begin.bind(this)
   }
    begin(){
      this.setState({activeQuestion:1})
    }

    handleClick() {
      if(this.state.activeQuestion <= myQuestion.length){
        this.setState(prevState => ({
          counter: this.state.counter + 1,
          activeQuestion:this.state.activeQuestion+1
        }));
      }


render() {
    return (
    <div className="App">
        <div id = "myQuiz">
          <div class ="intro {{  (activeQuestion > -1)? 'inactive':'active' }}">
            <h2>Welcome</h2>
            <p>Click begin to test your knowledge</p>
            <p class = "btn" onClick={this.begin('begin')}>Begin</p>
          </div>
          <div>
            <button onClick={this.handleClick}></button>
          </div>

从不同的函数调用中改变状态的正确方法是什么？

Answer 1

您没有将函数传递给cllick处理程序。相反，你正在调用像

这样的函数

onClick={this.begin('begin')}

此行导致无限循环，因为调用此函数正在更新状态，而状态又调用渲染函数。将其更改为

onClick={this.begin}

如果要将参数传递给处理程序，则

onClick={() => this.begin('begin')}

Answer 2

您的代码中存在多个问题。

您在构造函数中使用this.handleClick的绑定版本覆盖begin()，this.begin仍然不会绑定到this。
myQuestion来自构造函数中的哪个位置？它是一个全局范围的变量吗？
在handleClick()中，您不使用prevState来计算下一个州。相反，如果反应批次多次调用this.state，则使用setState()可能会导致不良行为。
为什么在段落上使用onClick处理程序？难道这不是一个按钮吗？
您必须在className中使用class代替jsx，因为class是javascript中的保留关键字。
您尝试设置的课程也将是文字intro {{ (activeQuestion > -1)? 'inactive':'active' }}。这肯定不是你想要实现的目标。

如何从两个不同的函数调用中更改状态？

2 个答案: