在React本地存储中添加新产品时，以前的产品将消失

Question

我正试图将产品存储在本地存储中，但当添加新产品时，上一个产品就会消失。即使我正在本地存储中传递一个数组。当我再次单击同一个产品时，它会更新阵列，但当添加新产品时，以前的产品就会消失。

这里是卡片的代码InsideView:

export default function CardInsideView() {

const [CartItems, setCartItems] = useState([])
const location = useLocation()
const AddItemsIntoCart =()=>{
console.log("working")
setCartItems([...CartItems,location.state]) 
}
useEffect(()=>{
if(CartItems.length){
localStorage.setItem("items",JSON.stringify(CartItems))
}
},[CartItems]) 

我有三个屏幕，主屏幕上显示卡片，卡片内部视图屏幕从使用位置获取数据，购物车屏幕显示存储在本地存储中的产品。

这是CartScreen 的代码

const getDataFromLocalStorage =()=>{
const data = localStorage.getItem("items")
if(data){
return JSON.parse(data)
}else{
return []
}
}
let data = getDataFromLocalStorage()  

请记住，单击同一产品时会更新本地存储阵列，但添加新产品时不会更新。当点击相同的产品时

当我添加另一个新产品时

Answer 1

请改用

setCartItems([...localStorage.getItem("items"),location.state])