使用setState（）后，突变状态属性错误仍然存​​在

Question

  if (this.state.foody === "THALI" && this.state.cat === "NONVEG") {
      this.setState({ nonvegthali: this.state.nonvegthali++});
    } else if (this.state.foody === "THALI" && this.state.cat === "VEG") {
      this.setState({ vegthali: this.state.vegthali++ });
    } else if (this.state.foody === "SNACK" && this.state.cat === "VEG") {
      this.setState({ vegsnack: this.state.vegsnack++ });
    } else if (this.state.foody === "SNACK" && this.state.cat === "NONVEG") {
      this.setState({ nonvegsnack: this.state.nonvegsnack++});
    }

在我不使用setState（）之前，很明显会出现“不直接改变状态”错误。但是，尽管在纠正了代码之后，尽管应用程序运行良好并提供了预期的输出，但是在控制台中我仍然遇到相同的错误。

Answer 1

您以错误的方式设置状态。 this.state.nonvegthali++在这里，您仍在改变状态。

尝试设置this.setState({nonvegthali: this.state.nonvegthali + 1});之类的状态

Answer 2

您做setState的第一件事是不对的。 其次是使用不正确的++直接增加状态值。

setState是一个异步函数，它接受一个对象，但是您仅将值作为参数传递，这是不正确的

使用prevState增加值。请检查以下更新的简化解决方案

   const { foody, cat } = this.state;
   if (foody === "THALI" && cat === "NONVEG") {
         this.setState(prevState => ({nonvegthali: prevState.nonvegthali +1);
 } else if (foody === "THALI" && cat === "VEG") {
         this.setState(prevState => ({vegthali: prevState.vegthali +1);
 } else if (foody === "SNACK" && cat === "VEG") {
        this.setState(prevState => ({vegsnack: prevState.vegsnack+1);
 } else if (foody === "SNACk" && cat === "NONVEG") { 
      this.setState(prevState => ({nonvegsnack: prevState.nonvegsnack+1);
}

Answer 3

您不能直接更改状态。所有操作都应通过setState（）函数进行。

this.setState(this.state.nonvegthali + 1);

这是直接改变状态。

this.state.nonvegthali++