Estoy tratando de almacenar una lista de elementos en el almacenamiento local usando hooks y state como . pero me devuelve un error
TypeError cartList is not iterableeste es mi código: (y este es el codesandbox )
import { useState, useEffect } from "react"; import { Button } from "react-bootstrap"; export default function App() { const [cartList, setCartList] = useState([]); const [cartItem, setCartItem] = useState([]); useEffect(() => { let localCart = localStorage.getItem("cartList") || "{}"; console.log("localcart", localCart); if (localCart) { localCart = JSON.parse(localCart); } setCartList(localCart); }, []); const handleClick = (e, item) => { e.preventDefault(); const arr = e.target.id.split("-"); const selectID = arr[1]; console.log("selectID", selectID); setCartItem({ ...cartItem, id: selectID }); console.log("cartItem", cartItem); let itemIndex = -1; for (const entry of Object.entries(cartList)) { console.log("entry", entry); } if (itemIndex < 0) { setCartList([...cartList, cartItem]); // error occurs here according to codesandbox localStorage.setItem("cartList", JSON.stringify(cartList)); } }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <Button variant="link" id="item-12" onClick={(e) => handleClick(e, cartItem)} > item no.12 </Button> <Button variant="link" id="item-100" onClick={(e) => handleClick(e, cartItem)} > item no.100 </Button> </div> ); }Creo que estás confundido acerca de un tipo de cartList . Supongo que sería un Array .
const [cartList, setCartList] = useState([]); // It is declared as Array useEffect(() => { let localCart = localStorage.getItem("cartList") || "{}"; // But initialized as Object this line console.log("localcart", localCart); if (localCart) { localCart = JSON.parse(localCart); } setCartList(localCart); }, []); if (itemIndex < 0) { setCartList([...cartList, cartItem]); // It should be an Array, but error occured as it's an Obejct. localStorage.setItem("cartList", JSON.stringify(cartList)); }Por qué está obteniendo TypeError: cartList is not iterable porque ha inicializado cartList incorrectamente.
Pruébelo en la consola siguiendo el fragmento, se enfrentará exactamente al mismo error.
console.log( [...{ prop: 'value' }] ) Por lo tanto, debe inicializar cartList como [] en lugar de {} dentro del useEffect como el siguiente.
let localCart = localStorage.getItem("cartList") || "[]";Como señaló @pilchard, está configurando cartList como un objeto en esa línea:
localStorage.getItem("cartList") || "{}";
Entonces, en el primer renderizado antes de establecer el valor de carlist en almacenamiento local, está configurando el estado como un objeto que no se puede distribuir dentro de una matriz