Actualmente estoy tratando de obtener los valores de las casillas de verificación, identificadores, para poder hacer algo de lógica y almacenarlos en una base de datos. Lo que estoy tratando de hacer es algo así como un calendario semanal, y si hace clic en uno, significa que seleccionó ese día, por ejemplo, id: 1 = Sun , pero si lo vuelvo a hacer clic, no quiero que duplique el id, prefiero que no se seleccione el significado, eliminarlo. Esto es lo que hice, incluso intenté usar conjuntos pero no funciona (el conjunto agrega y elimina cosas, pero el problema está claramente en (prev) => [...] ) eso es lo que creo que es lo que estoy haciendo mal, así que creo que solo necesito alguna recomendación sobre cómo hacerlo.
const [dayId, setDayId] = useState([]); {days.map((day, idx) => ( <input onChange={(e) => { let checked = e.target.value; const values = new Set(); setDays( days.map(data => { if (data.id === day.id) { let value = e.target.value; data.id = value; if(data.select === false) { data.select = true; } else { data.select = false; } } return data; }) ); if(values.has(checked)) { values.delete(checked); } if(e.target.checked === true) { values.add(checked); } if(e.target.value === false) { values.delete(checked); } setDayId(prev => { return [...prev, ...values] }) console.log("CHECKING CHECKED VALUE", e.target.checked); console.log("WHAT IS THE SET VALUE", values) }} key={idx} name={day?.name} type="checkbox" value={day?.id} checked={day.select} /> ))} En resumen, quiero que esa matriz agregue valores de eliminación dependiendo de si se marcaron y luego se desmarcaron, el set realmente lo hace, pero los valores no se mantienen, por eso hice esto, setDayId(prev => {return [...prev, ...values]}) , pero ahí mismo mantiene los valores y nunca los elimina e incluso los duplica. Cualquier ayuda sería muy apreciada.
Si entiendo su pregunta, básicamente desea agregar la identificación si la checked es verdadera, y eliminar la identificación si la checked es falsa, del estado dayId . En setDayId verifique el valor checked y, si es verdadero, copie superficialmente el estado de dayId y agregue la nueva identificación ( value ), de lo contrario, elimínelo de la matriz de dayId usando una función .filter .
{days.map((day, idx) => ( <input onChange={(e) => { const { checked, value } = e.target; setDays( days => days.map(data => { if (data.id === day.id) { return { ...data, id: value, select: !data.select, }; } return data; }) ); setDayId(prev => { return checked ? [...prev, value] // add if checked : prev.filter(val => val !== value) // remove if not checked }); console.log("CHECKING CHECKED VALUE", e.target.checked); console.log("WHAT IS THE SET VALUE", values) }} key={idx} name={day?.name} type="checkbox" value={day?.id} checked={day.select} /> ))}