Tengo una lista de dos selecciones desde donde puedo seleccionar el valor
lista uno = "A", "B"
lista dos = "C", "D", "E", "F"
tengo un estado en reaccionar
const [filterTags, setFilterTags] = useState({ one: [], two: [] }); Puedo pasar un valor a la vez desde cualquiera de la lista en updateValue(val) Necesito actualizar las etiquetas de filtro de tal manera que si su val es de la lista one que es A o B , debería actualizar el estado de esta manera {first:["A"]: second:[]} ,
Si vuelvo a pasar el mismo valor, debería eliminar el valor y actualizarlo marcando y desmarcando
el siguiente código puede agregar nuevos valores si no están presentes, pero si están presentes no hace nada... debería eliminar el valor si están presentes
const updateValue = (val) => { setFilterTags((prev) => { const key = val === 'A' || val === 'B' ? 'first' : 'second'; return prev[key].includes(val) ? prev : { ...prev, [key]: [...prev[key], val] }; }); };pocos casos de uso son
si paso ACCDBAEC uno por uno, debería actualizar la matriz con los valores únicos y la salida debería ser
{first:["A"]: second[]} //passing A {first:["A"]: second["C"]} //passing C {first:["A"]: second:[]} // same since C is already there it removes and update {first:["A"]: second["D"]} //passing D {first:["A","B"]: second:["D"]} //passing B {first:["B"]: second:["D"]} //same since A is already present it removes "A" on passing A {first:["B"]: second:["D","E"]} //passing E {first:["B"]: second:["D","E","C"]}// final output on passing Cdebe actualizar el elemento respectivo con valores únicos si no está presente y eliminar los valores si están presentes en este momento. El código anterior solo puede actualizar los valores únicos.
La razón por la que su código no funciona es que le falta un filter() que elimina el valor. Puede usar una función de ayuda simple toggleVal() que realiza la lógica de alternancia, incluido el filter() , y luego devuelve la lista actualizada.
const oneVals = ["A", "B"]; const twoVals = ["C", "D", "E", "F"]; const [filterTags, setFilterTags] = useState({ one: [], two: [] }); const toggleVal = (possibleVals, list, value) => { if (!possibleVals.includes(value)) { return list; } return list.includes(value) ? list.filter(val => val !== value) : [...list, value]; }; const updateValue = (value) => { setFilterTags(({ one, two }) => ({ one: toggleVal(oneVals, one, value), two: toggleVal(twoVals, two, value) })); };Hice algunos cambios en su código: en lugar de usar un operador ternario que es confuso en situaciones más complejas, opté por una declaración if.
Limpié el selector de llave.
La forma en que elimina valores de un objeto (que es un secreto) es escribir eliminar seguido de una referencia a la clave que desea eliminar.
const updateValue = (val) => { setFilterTags((prev) => { const key = ['A', 'B'].includes(val) ? 'first' : 'second'; if (prev[key].includes(val)) { // clone the current key you are using because don't mutate state. let prevClone = { ...prev[key] } // delete the desired key delete prevClone[prevClone.indexOf(val)] // return the whole state, with the mutation. return { ...prev, [key]: prevClone } } else { // else just add it. return { ...prev, [key]: [...prev[key], val] }; } }); };