Tengo un filtro que recibe datos y luego los muestra. Lo que quiero hacer es eliminar los duplicados de mis datos, sin embargo, no estoy seguro de cómo lo haría en este caso. Estoy usando el filtro y el mapa juntos, sin embargo, mis claves de etiqueta no se muestran. ¿Cómo puedo mapear los datos en este caso y mostrar la etiqueta y filtrar los datos para eliminar los duplicados?
Aquí está mi código de filtrado de código:
props.dataItem[props.field] = e.target.value .filter((element, index) => localizedData.indexOf(element) === index) .map((item) => { return item.label; }) .join(','); props.onChange({ dataIndex: 0, dataItem: props.dataItem, field: props.field, syntheticEvent: e.syntheticEvent, value: e.target.value, tabIndex: 0, }); } }; const localizedData = [ { value: 'one', label: 'one', id: 1 }, { value: 'two', label: 'two', id: 2 }, { value: 'three', label: 'three', id: 3 }, { value: 'four', label: 'four', id: 4 }, { value: 'four', label: 'four', id: 4 }, ];Y todo mi código:
import React, { useState } from 'react'; import { MultiSelect } from '@progress/kendo-react-dropdowns'; export const SymphonyMultiSelectCell = (props) => { let dataItemKey = 'value'; let textField = 'label'; const onChange = (e) => { if (props.onChange) { console.log('e.target.value...', e.target.value); let values = e.target.value; console.log(values); let arrayLength = values.length; let dataChangeDisplay = ''; let fieldValues = []; for (let i = 0; i < arrayLength; i++) { if (i == arrayLength - 1) { dataChangeDisplay = dataChangeDisplay + values[i][dataItemKey]; } else { dataChangeDisplay = dataChangeDisplay + values[i][dataItemKey] + ','; } fieldValues.push(values[i]); console.log('fieldValues', fieldValues); } props.dataItem[props.field] = e.target.value .filter((element, index) => localizedData.indexOf(element) === index) .map((item) => { return item.label; }) .join(','); props.onChange({ dataIndex: 0, dataItem: props.dataItem, field: props.field, syntheticEvent: e.syntheticEvent, value: e.target.value, tabIndex: 0, }); } }; const localizedData = [ { value: 'one', label: 'one', id: 1 }, { value: 'two', label: 'two', id: 2 }, { value: 'three', label: 'three', id: 3 }, { value: 'four', label: 'four', id: 4 }, { value: 'four', label: 'four', id: 4 }, ]; return ( <td> <MultiSelect data={localizedData} textField="value" dataItemKey="id" onChange={onChange} /> </td> ); };Si desea eliminar elementos duplicados en su arreglo, puede hacerlo en una línea:
const uniqueNames = Array.from(new Set(names));En su lógica de filtrado, actualmente está comparando la igualdad de objetos .
Lo que esto significa es que dos objetos diferentes con las mismas propiedades todavía se consideran distintos .
p.ej:
({ a: 1, b: 2 }) === ({ a: 1, b: 2 }) // returns false Por lo tanto, su expresión de filter también considera que cada elemento es distinto:
p.ej:
x = [ { a: 1, b: 2 }, { a: 1, b: 2 } ] x.filter((element, index) => x.indexOf(element) === index).length // Still is 2Deberá definir explícitamente qué significa igualdad en el contexto de su aplicación entre dos de los objetos para que coincida y elimine adecuadamente.