React setState 更新不正确

Question

const [cartItems, setcartItems] = useState([] as Product[]);

const addItemToCart = (product: Product) => {
  setcartItems((preCartItems) => {
    const updatedcart = [...preCartItems];
    if(!updatedcart.length)
      updatedcart.push(product)
    // updatedcart[0].price original value 1
    updatedcart[0].price = updatedcart[0].price + 1 ;
    console.log(updatedcart[0].price); // prints 2
    console.log(updatedcart); // printed object is saying price value 3
    return updatedcart;
  });
};

我无法理解该值如何自动递增 1，以及为什么对象上的值与点运算符访问的值相比给出不同的输出

Answer 1

问题是你在 setcartItems.

内改变你的状态

const updatedcart = [...preCartItems]; 并不是复制 preCartItems 中的对象，它只是将相同对象的引用分散到一个新数组中。

然后你在这里改变对象 updatedcart[0].price = updatedcart[0].price + 1 ;。

这将导致状态的两个不同版本，因此结果不一致。

如果你想复制你应该做的对象

const updatedcart = preCartItems.map(item => ({ ...item }));

这个 returns 新对象数组，您可以对它们执行任何操作。这种复制对象数组的方式也很浅，它只适用于 1 个深度级别，如果你还想复制嵌套对象，你需要更强大的功能。

React setState 更新不正确

React setState is incorrectly updating

javascript

setstate

reactjs

react-hooks