反应钩子使用状态不更新 UI

Question

我是 React Hooks 的新手，我正在尝试使用以下代码更新购物车中的数量;

import React, { useState, useEffect } from "react";
import cookie from "react-cookies";
import CheckoutItems from "./CheckoutItems";
import restHelper from "../../shared/RestHelper";
const Checkout = () => {
const [cart, setCart] = useState(null);
useEffect(() => {
const cartId = cookie.load("RbCartId");
if (cartId){
(async () => {
const cart = await restHelper.getUserCart(cartId);
setCart(cart);
})();
}
}, []);
const handleQtyUpdate = (evt, id) => {
let _cart = cart;
let items = _cart.cartItems.filter(x => x.id === id);
let cartItem = { ...items[0] };
cartItem.quantity = Number(evt.target.value);
const index = _cart.cartItems.findIndex(x => x.id === cartItem.id);
_cart.cartItems[index] = cartItem;
setCart(_cart);
};
return (
<section>
<div className="container" style={{ marginTop: "80px" }}>
<h3 className="rb-highlight">Shopping Cart</h3>
<table className="table" style={{marginTop: "20px"}}>
<thead>
<tr>
<th>Items</th>
<th style={{ textAlign: "right" }}>Price</th>
<th style={{ textAlign: "right" }}>Quantity</th>
<th style={{ textAlign: "right" }}>Total</th>
</tr>
</thead>
<tbody>
<CheckoutItems cart={cart} onQtyUpdate={handleQtyUpdate} />
</tbody>
</table>
</div>
</section>
);
}
export default Checkout;

结帐项组件是

import React from "react";
function CheckoutItems({cart, onQtyUpdate}){
if (!cart || cart.cartItems === 0){
return <tr><td colSpan="4"><span className="rb-highlight">There are no items in your cart</span></td></tr>;
}
else{
const cartItems = cart.cartItems.map((item, index) => {
return <tr key={index}>
<td>{item.description}</td>
<td style={{textAlign: "right"}}>&euro;{item.cost}</td>
<td style={{textAlign: "right"}}><input type="text" id={item.id} name="quantity" value={item.quantity} onChange={(evt) => onQtyUpdate(evt, item.id)} /></td>
<td style={{textAlign: "right"}}>&euro;{item.cost * item.quantity}</td>
</tr>
})
return cartItems;
}
}
export default CheckoutItems;

购物车项在handleQtyUpdate中成功更新，但 UI 中的值不会更新。 根据我所读到的内容，我应该使用useEffect来更新购物车，但我不确定如何从handleQtyUpdate开始使用它。

Answer 1

问题是状态比较很浅，这意味着，在对象的情况下，只会比较引用。

在你的例子中，你更新了cartItems属性，但没有更新对象实例，所以就 React 而言，状态没有改变，因为它不会检查单个属性。

尝试每次创建一个全新的购物车，您应该会看到UI更新，例如

setCart({ ..._cart })

Answer 2

您应该使用展开运算符获得对象的副本

setCart({..._cart}(