使用 setState() 后，变异状态属性错误仍然存在答案

【问题标题】：mutate state property error still exists after using setState()使用 setState() 后，变异状态属性错误仍然存在
【发布时间】：2019-06-06 00:22:15
【问题描述】：

  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() 之前，很明显会得到“不要直接改变状态”错误。但是，尽管在纠正代码后，我在控制台中遇到了同样的错误，尽管应用程序运行良好并给了我预期的输出。

【问题讨论】：

Do not mutate state directly, Use setState() react/no-direct-mutation-state in React JS的可能重复

标签： javascript reactjs

【解决方案1】：

首先你做 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);
}

【讨论】：

谢谢你，我自己也想通了。再次感谢@HemadriDasari

【解决方案2】：

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

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

【讨论】：

JaiNepal，快乐的编码。