Question

我对编码非常陌生，所以如果我的问题不正确，请原谅。

我正在尝试创建一个带有react的琐事应用程序，但它似乎不起作用。我目前正在努力使应用程序在单击答案时从一个问题跳到另一个问题。

我现在收到此错误 TypeError：无法添加属性setState，对象不可扩展。我已经感到有点绝望，因为似乎没有任何事情适合我。

任何人都可以帮助我并指导下一步该怎么做吗？

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

您在此处分配给setState：

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

您需要调用它：

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

Answer 2

更改

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

收件人

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

Answer 3

我认为您的目标是让班级具有默认状态

您试图做的事称为Class field，目前处于投标状态，因此这对您不起作用。您可以安装将其转换为有效javascript的内容，也可以设置默认状态，例如

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

Answer 4

如果以这种方式调用this.setState（），则始终需要将生命周期中的先前状态作为参数传递。

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

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

4 个答案: