Tengo un proyecto que muestra una página en blanco en las páginas de GitHub. Yo he añadido
"homepage": "https://jusmccar.github.io/ContactManager", "predeploy": "npm run build", "deploy": "gh-pages -d build", a mi package.json y ejecuté los comandos
npm install gh-pages --save-dev npm run deployAquí está el enlace a mi repositorio: ContactManager
Tengo otro proyecto FitClub en el que funciona bien, así que no sé qué estoy haciendo mal.
Tu problema está aquí en App.js
const [contacts, setContacts] = useState( JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) );
No está haciendo nada para manejar el caso inicial en el que no hay nada en el almacenamiento local.
Esto hace que se pase null a la propiedad de contacts en ContactList . El código allí intenta usar props.contacts.map() lo que conduce a este error que ve en la consola de su navegador...
No se pueden leer las propiedades de nulo (leyendo 'mapa')
en x (ListaContactos.js:9:46)
Sugeriría por defecto una matriz vacía cuando getItem() devuelve null
const [contacts, setContacts] = useState( JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) ?? [] ); Otra sugerencia sería utilizar TypeScript, que le advertiría sobre la posibilidad de que localStorage devuelva valores null .
Creo que se implementó bien, pero hay un error en su componente ContactsList. Míralo la consola. TypeError: e.contacts es nulo