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

Question

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

这里是 cardInsideView 的代码：

 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]) 

我有 3 个屏幕，显示卡片的主屏幕，从 uselocation 获取数据的卡片内部视图屏幕，以及显示存储在本地存储中的产品的购物车屏幕。

这是 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])