Estoy usando react-multi-date-picker para crear un programador de exenciones. El selector de fecha múltiple de reacción se usa dentro de una tabla de reacción de la siguiente manera:
const [data, setData] = useState(0); const [dateValues, setDateValues] = useState({}); const columns = useMemo( () => [ { Header: "Exemptions", // First group columns columns: [ { Header: "Exemptions", accessor: "exemptions", Cell: ({ row, data }) => ( <DatePicker multiple key={data[row.index].id} onChange={(dateValues) => { const valueId = data[row.index].id; Object.keys(dateValues).map((key) => { setDateValues((oldArray) => ({ ...oldArray, [valueId]: { ...oldArray[valueId], [key]: dateValues[key] ?.toDate?.() .toISOString?.() .substring?.(0, 10), }, })); }); }} plugins={[<DatePanel />]} /> ), }, ], }, ], [] );
data produce un objeto a partir de una llamada axios con la siguiente estructura.
(1) [{…}] 0: exemptions: null id: 1 name: "John Smith" user_supervisor: "Joe Black" [[Prototype]]: Object
Si tuviera que seleccionar 4 fechas del selector de fecha múltiple de reacción y después de mi llamada onChange en el gancho de memorización, me queda esto en los valores de fecha:
{1: {…}} 1: 0: "2022-02-02" 1: "2022-02-03" 2: "2022-02-08" 3: "2022-02-08" [[Prototype]]: Object [[Prototype]]: Object
Todo esto funciona como se esperaba. Con lo que estoy luchando es con la eliminación de fechas del objeto dateValues cuando un usuario anula la selección de la fecha del selector de fecha múltiple de reacción. He intentado usar un ternario, he intentado usar .filter
e .includes
. Cada opción que he probado arroja un error diferente.
Estoy en un bloqueo mental sobre la lógica necesaria. Mis pensamientos han sido que necesito comparar el estado anterior con el nuevo estado y seguir haciendo coincidir los valores mientras descarto cualquier valor que no coincida entre los dos estados. Simplemente no puedo codificarlo de una manera que funcione. Cualquier ayuda en esto sería muy apreciada.
si estaba usando un filtro en los valores de fecha, el error probablemente se debió a que estaba tratando de usar ese método en un objeto. puede usar el método de filtro en matrices pero no en objetos ob. Intente convertir valores de fecha en una matriz con Object.values (obj) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values
y luego encadene el filtro en él. Filtre todas las fechas que no sean iguales a la fecha deseleccionada y actualice el estado con la matriz de resultados proveniente del método de filtro.