在 setState() 中增加状态对象值是不是有效？不克隆对象？

Posted 2023-02-22

【中文标题】在 setState() 中增加状态对象值是不是有效？不克隆对象？

【英文标题】：Is it valid to increment a state object value inside setState(); without cloning the object?在 setState() 中增加状态对象值是否有效？不克隆对象？

【发布时间】：2020-10-01 12:13:40

【问题描述】：

在setState(return ) 中增加一些ingredients 值而不克隆ingredients。可以吗？

state = 
   // The object I need to increment its value.
   ingredients: 
      sugar: 0,
      salt: 0,
      pepper: 0
   ,
   count: 0


addSugarHandler = () => 
   this.setState((prevState, props) => 
      return 
         // Incrementing some `ingredients` value
         // inside `setState()` without cloning it.
         // Is it OK?
         ingredients: prevState.ingredients.sugar + 1,
         // I am sure the following is valid
         count: prevState.count + 1
      ;
   );

【问题讨论】：

我认为这不会像你想要的那样工作。这只会用不是一个对象覆盖你的成分，而是用 suger +1 中的数字代替。所以，当然，你可以这样做，但你的成分对象会在这个过程中丢失。

最初 ingredients 是一个对象。第一次更新后，它变成一个数字。之后它总是NaN。所以答案是否定的，除非你真的需要这种奇怪的行为。

谢谢@YuryTarabanko，我没有注意到非常不正确的递增:)

@YuryTarabanko BTW :) 最后一行有效吗？ count: prevState.count + 1

@SalehRezq LGTM

【参考方案1】：

您可以这样做。但是需要进行一些更正。 应该是这样的。

    this.setState((prevState, props) => 
      return 
       ingredients: 
         ...ingredients,
         sugar: prevState.ingredients.sugar + 1
       ,
       count: prevState.count + 1
     ;
   );

【讨论】：

count 不是 state.ingredients 的一部分，您应该将其下移一行