Tengo localStorage con varios elementos. Quiero recuperarlos todos y mostrarlos en una interfaz de usuario de material <ListItem> .
Aquí está mi código actual:
function saveJob(key, value) { localStorage.setItem(key, value); }la función saveJob es básicamente guardar el valor junto con una clave única. El contenido de localStorage sería algo como esto:
| Llave | Valor |
|---|---|
| 1 | Técnico |
| 2 | Plomero |
Cómo recuperé los artículos:
var savedJobs = []; useEffect(() => { var keys = Object.keys(localStorage), i = keys.length; while (i--) { savedJobs.push(localStorage.getItem(keys[i])); } return savedJobs; }, []) Ahora sobre el problema, traté de mostrarlo en un componente funcional a través de <ListItem> Material UI como el siguiente:
<List> {savedJobs.map((job) => ( <ListItem key={job.Key} disablePadding> <ListItemButton> <ListItemText primary={job.Value} /> </ListItemButton> </ListItem> ))} </List>Esto no está funcionando. ¿Alguien puede señalarme en la dirección correcta?
React no activa la reproducción cuando se cambió una variable local en un componente de función. Se volverá a renderizar cuando: el estado haya cambiado, se cambiaron los accesorios o se volvió a renderizar el componente principal.
Debe poner sus savedJobs para indicar y escribir
const [trabajosGuardados, establecerTrabajosGuardados] = estadoUso([]);
en vez de
var trabajos guardados = [];
Necesita estado para almacenar los datos que recupera del almacenamiento local. En lugar de su var de useEffect savedJobs cree una matriz dentro del gancho y luego actualice su estado con estos datos. Aquí hay un ejemplo:
// Initiate your state as an empty array. const [savedJobs, setSavedJobs] = useState([]); // Used as an example instead of localstorage. const example = ["foo", "bar"]; useEffect(() => { let jobs = []; let keys = Object.keys(example), i = keys.length; while (i--) { jobs.push(example[i]); } setSavedJobs(jobs); }, [example]); return <>{savedJobs.map((job) => job)}</>;O vea este ejemplo interactivo .
Primero verificaría qué hay dentro de su matriz de trabajos guardados. Parece que los trabajos guardados se verían así:
trabajos guardados = ['Técnico', 'Plomero'];
Por otro lado, está mapeando y obteniendo el valor así: {job.Key} & {job.Value}
Probar:
<List> {savedJobs.map((job, i) => ( <ListItem key={i} disablePadding> <ListItemButton> <ListItemText primary={job} /> </ListItemButton> </ListItem> ))} </List> pd: no debe usar i como clave, pero le dejo averiguar qué valor quiere allí.
Si desea usar {job.key} y {job.value}, debe push un objeto así:
savedJobs.push({key: i, value: localStorage.getItem(keys[i])});