0
169
ViewsMostrar el contenido de la matriz cada vez que hay un elemento en la matriz que no funciona correctamente en mi Proyecto React
En este mi proyecto, quiero que los valores marcados se muestren delante de los filtrados aplicados, pero esto no funciona como se esperaba. Cada vez que se marca una casilla, muestra todo el valor marcado y cada vez que se desmarca una casilla, desaparece automáticamente. ¿Alguien puede ayudarme a verificar qué estoy haciendo mal? codigosandbox
Mi código App.js
import React from "react"; import "./styles.css"; import { useState, useEffect } from "react"; export default function App() { const [isselected, setisselected] = useState([]); const OnChange = (e) => { console.log(e.target.checked); const ischecked = e.target.checked; if (ischecked) { setisselected([...isselected, e.target.value]); } else { const index = isselected.indexOf(e.target.value); isselected.splice(index, 1); setisselected(isselected); } console.log(isselected); }; useEffect(() => { console.log(isselected, "value selected"); }, [isselected]); return ( <div className="App"> <span> Filters applied:{" "} {isselected.map((i) => ( <span>{i}</span> ))} </span> <div className="first-search"> <input type="checkbox" className="input-1" value="Lastsevendays" name="last_seven" id="1" onChange={OnChange} /> <label htmlFor="">Last 7 days</label> </div> <div className="first-search"> <input type="checkbox" className="input-1" name="last24" value="last_24" id="2" onChange={OnChange} /> <label htmlFor="">Last 24 hours</label> </div> </div> ); }2 answers
Answer question0
Tema
Está isselected el estado seleccionado al eliminar filtros. Array.prototype.splice muta la matriz en el lugar.
const OnChange = (e) => { const ischecked = e.target.checked; if (ischecked) { setisselected([...isselected, e.target.value]); } else { const index = isselected.indexOf(e.target.value); isselected.splice(index, 1); // <-- mutation!! setisselected(isselected); // <-- same array reference } };Solución
Utilice Array.prototype.filter para filtrar por índice la isselected y devolver una nueva referencia de matriz.
const OnChange = (e) => { const ischecked = e.target.checked; if (ischecked) { setisselected([...isselected, e.target.value]); } else { const index = isselected.indexOf(e.target.value); setisselected((isselected) => isselected.filter((_, i) => i !== index)); } }; Dado que la isselected está almacenando primitivas, también puede filtrar directamente por el valor del filtro.
setisselected((isselected) => isselected.filter((val) => val !== e.target.value) ); 
0
lo que está haciendo es mostrar el estado con console.log() y es la naturaleza de console.log() que muestra el valor anterior del estado, y también hice algunos cambios en su función Onchange y es trabajando ahora intente esto y luego hágame saber si está funcionando o no:
const OnChange = (e) => { console.log(e.target.checked); const ischecked = e.target.checked; if (ischecked) { setisselected([...isselected, e.target.value]); } else { let temp = [isselected]; const index = temp.indexOf(e.target.value); temp.splice(index, 1); setisselected(temp); } console.log(isselected); };