React App-TypeError：无法添加属性setState，对象不可扩展

Question

I am very new to coding so please excuse me if my question is not correct.

I am trying to create a trivia app with react but it doesn't seem to work. I am currently working to make the app jump from one question to another when clicking on the answer.

I now receive this error TypeError: Cannot add property setState, object is not extensible . I feel already a little desperate as nothing seems to work for me.

Can anyone please help me and guide what I should do next?

Trivia.js:

    state = {
        questionId: 0
    };

nextQuestion () {
    this.setState = () => {
        return{questionId: this.state.questionId + 1}
    };
};

render(){
    return(
        <div>
            <Question 
                trivia = {quizList[this.state.questionId]} 
                onClick = {this.nextQuestion}
            />
        </div>
    )
}

Question.js

render(){

    return(
        <div>
            <div>
                <h2>{this.props.quiz.question}</h2>
            </div>
            <div>
                {this.props.quiz.answers.map((quizAnswer)=>
                    <li onClick={()=>this.props.onClick()}>
                        {quizAnswer.ans}
                    </li>
                )} 
            </div>
       </div>
    )
}

}

Answer 1

You're assigning to setState here:

this.setState = () => {
    return{questionId: this.state.questionId + 1}
};

You need to be calling it:

this.setState(state => {
  return {
    questionId: state.questionId + 1
  };
});

Answer 2

Change

     this.setState = () => {
    return{questionId: this.state.questionId + 1}
};

To

     this.setState(prevState => ({
         return {questionId: prevState.questionId + 1}
    ))};

Answer 3

I assume that your goal is to have default state for your class

What are you trying to do is called Class field and currently is in proposal status so that is why it's not working for you. You can either install something that will transpile this into valid javascript or set the default state like this

class MyComponent extends Component {
  constructor(props) {
    super(props);
       questionId: 0
    state = {
    };
  }
}

Answer 4

You always need to pass in your previous state in the lifecyle as a parameter if you are calling this.setState() in this fashion.

nextQuestion () {
    this.setState = (prevState) => {
        return{questionId: this.prevState.questionId + 1}
    };
};