Tengo un formulario donde pongo un valor flotante (1.1, 1.2, 1.9 y así sucesivamente) y quiero almacenar un montón de ellos dentro de una matriz en un átomo:
import { atom } from 'recoil'; export const valueState = atom({ key: 'values', default: [] }); Cada vez que escribo un valor y se verifica que es un doble, el valor se agrega a valueState , sin embargo, quiero que si el valor que escribo en el formulario se elimina, también elimina el valor de la matriz valueState . Intenté usar pop , sin embargo, si lo hago, el programa falla. ¿Cómo puedo hacerlo entonces?
import { valueState as valueStateAtom } from '../../atoms/Atoms'; import { useSetRecoilState } from 'recoil'; const setValue = useSetRecoilState(valueStateAtom); // The function that handles the onChange event of the form const setNewValue = (v) => { if (v !== '') { const valueNumber = parseFloat(v); if (!isNaN(valueNumber)) { setPageValueChanged(true); pageValue = valueNumber; // The value gets added to valueState setValue((prev) => prev.concat({ valueNumber, cardID })); } else { setPageValueChanged(false); } } else { setPageValueChanged(false); // Delete v from the atom array here } };pop no funcionó para usted porque no devuelve una nueva matriz (inmutabilidad del estado)
Creo que puedes hacer un truco con filter . Por ejemplo
setValue((prev) => prev.filter((value, index) => index !== prev.length - 1));código completo
import { valueState as valueStateAtom } from '../../atoms/Atoms'; import { useSetRecoilState } from 'recoil'; const setValue = useSetRecoilState(valueStateAtom); // The function that handles the onChange event of the form const setNewValue = (v) => { if (v !== '') { const valueNumber = parseFloat(v); if (!isNaN(valueNumber)) { setPageValueChanged(true); pageValue = valueNumber; // The value gets added to valueState setValue((prev) => prev.concat({ valueNumber, cardID })); } else { setPageValueChanged(false); } } else { setPageValueChanged(false); setValue((prev) => prev.filter((value, index) => index !== prev.length - 1)); } }; Un comentario más, su concat aparentemente es incorrecta. Espera tener un parámetro de matriz pero pasaste un objeto. La modificación puede ser
setValue((prev) => prev.concat([{ valueNumber, cardID }]));