Tengo un campo de selección desplegable donde puedo elegir diferentes valores de atributos. El problema es cuando trato de almacenar los datos seleccionados en el estado en que obtuve el doble de la etiqueta que no necesito. Quiero que si la etiqueta ya existe en mi estado, las etiquetas no se incluirán, pero sí el valor seleccionado.
Mis objetos seleccionados:
Rendimiento esperado:
{label: "colors" selected: Array(2) 0: {label: 'Black', value: 1} 1: {label: 'Green', value: 2} }, {label: "size" selected: Array(1) 0: {label: 'M', value: 1} } ]Estoy intentando así, pero estoy confundido acerca de cómo puedo omitir la etiqueta si la etiqueta de valor ya existe.
const previousValue = (label: string, e: any) => { let isExist: any; if (newAttributes?.length > 0) { isExist = newAttributes.find((attr: any) => attr.label === label) } console.log(isExist); const newValue = { label: label, selected: e } setNewAttributes((oldArray: any): any => { if (isExist) { // confused how can I skip the label } else { return [...oldArray, newValue] } }); }Puede usar el método findIndex en lugar de find para encontrar si el elemento existe en la matriz newAttributes .
findIndex devuelve -1 cuando el elemento no existe en la matriz y, de lo contrario, devuelve el índice del elemento. Podría usar ese índice para obtener el Objeto y actualizarlo.
const previousValue = (label: string, e: any) => { let itemIndex: any; if (newAttributes ? .length > 0) { itemIndex = newAttributes.findIndex((attr: any) => attr.label === label) } const newValue = { label: label, selected: e } setNewAttributes((oldArray: any): any => { if (itemIndex >= 0) { // item exists at newAttributes[itemIndex] let updatedArr = [...oldArray]; updatedArr[itemIndex] = { ...updatedArr[itemIndex], selected: [...updatedArr[itemIndex].selected, e] } return updatedArr; } else { return [...oldArray, newValue] } }); }