Mi matriz y el almacenamiento local siguen reiniciándose después de cada actualización. He visto algunas respuestas como que necesito analizar los datos y luego clasificarlos. El problema al que me he enfrentado es que sigo recibiendo un mensaje de error que dice "el almacenamiento local no está definido" y un error interno del servidor 500.
He escrito el código a continuación
//objeto
"items": [ { "id": 119603782, "node_id": "MDEwOlJlcG9zaXRvcnkxMTk2MDM3ODI=", "name": "react-contextual", "full_name": "drcmda/react-contextual", "private": false, }, { "id": 119603782, "node_id": "MDEwOlJlcG9zaXRvcnkxMTk2MDM3ODI=", "name": "react-contextual", "full_name": "drcmda/react-contextual", "private": false, }conseguir el objeto
export async function getServerSideProps() { const res = await fetch( "https://api.github.com/search/repositories?q=created:%3E2017-01-10&sort=stars&order=desc" ); const data = await res.json(); return { props: { data, }, }; }esta es mi funcion
//trying to keep the values after a page refresh const favs = JSON.parse(localStorage.getItem('name')) || []; //localstorage is not defined //define it here const storage = typeof window !== 'undefined'? localStorage.getItem('name') : null //check for value then store it in array and to local storage function checkId (e) { if(e.target.value !== ""){ favs.push(e.target.value) //check if it exists localStorage.getItem('name') === null //if exists store it localStorage.setItem('name', JSON.stringify(favs)) console.log(favs); } } <div className="grid grid-cols-3 rows-2 text-lg font-bold"> {storage} </div> <div className="grid grid-cols-3 grid-rows-2 gap-2 bg-black text-white border-white"> {data.items .sort(function (a, b) { return new Date (b.created_at) - new Date(a.created_at) || a.stargazers_count - b.stargazers_count }) .map((d) => ( <button id="btn" onClick={checkId} value={d.name}>Favorite me </button>Está llamando a localStorage en lugares equivocados, aunque usó type of window !== 'undefined' , ya está llamando a const favs = JSON.parse(localStorage.getItem('name')) antemano.
Asumiendo que este es un componente React. Puede obtener el almacenamiento local en una llamada useEffect.
const Component = () => { const [ fav,setFavs ] = useState([]); useEffect(() => { if (typeof window !== 'undefined') { //necessary because u are using nextjs const storage = localStorage.getItem('name'); if (storage) { setFavs(JSON.parse(storage)); //favs will be populated with your localStorage once, on component mount. } } },[]) const checkId = (e.target.value) => { const value = e.target.value; if (!value) return; const newFavs = [...favs, value] localStorage.setItem('name', JSON.stringify(newFavs)); setFavs(newFavs); } ..... return (<pre>{ JSON.stringify(favs, null, 4)}</pre>) } Si desea que sus favs sean únicos (los valores no se repiten), en lugar de
const newFavs = [...favs, value]cambiarlo a
const newFavs = [...new Set([...favs, value])]esta fue la respuesta
const favs = typeof window !== "indefinido" ? JSON.parse(localStorage.getItem('nombre')): nulo || [];
Lo que debe hacer primero es configurar el elemento en el almacenamiento local:
function setItem(key, item) { localStorage.setItem(key, JSON.stringify(item)); }ahora, después de actualizar la página, puede recuperarla del almacenamiento local:
function getItem(key) { const item = localStorage.getItem(key); return JSON.parse(item); }Eso debería ser. También asegúrese de no estar en modo inkognito en el navegador, lo que podría restablecer el almacenamiento al recargar la página.
Para aclarar aún más, su secuencia de comandos se vería así:
const myTestItem = 'test item'; function setItem(key, item) { localStorage.setItem(key, JSON.stringify(item)); } function getItem(key) { const item = localStorage.getItem(key); return JSON.parse(item); } setItem('test', myTestItem); // after reload you can check wether it's there. console.log(getItem('test')); // <-- just to log it to console, also u could check the application tab in chrome console and check the localstorage.Ejemplo de reacción en codesandbox:
Saludos