Estoy tratando de eliminar un elemento de la columna específica en la que se encuentra y renderizar el componente para que desaparezca de inmediato.
en la aplicación tengo 4 columnas y órdenes que se obtienen de una API
este es el useState y useEffect que he creado hasta ahora
const [orders, setOrders] = useState([]); const [columns, setColumns] = useState([]); const [columnsCopy, setColumnsCopy] = useState([]); useEffect(() => { props.fetchOrder(setOrders) },[]) console.log(orders); useEffect( () => { setColumns(() => { return { newOrder:{ name: "Requested", items: orders, }, inProgres: { name: "In Progres", items: [], }, finished: { name: "Finished", items: [], }, deliverd: { name: "Deliverd", items: [], }, }}) console.log(columns) }, [orders]); useEffect( () => { setColumnsCopy((prevState) => { return { ...prevState, ...columns, }}) }, [columns]); console.log(columnsCopy)y esta es la función deleteItem
const deleteItem = ( item, columnsCopy, setColumnsCopy) => { const itemId = item._id const itemsArray = [columnsCopy]; itemsArray.splice(item.index , 1); setColumnsCopy((prevState) => { return { ...prevState, ...itemsArray } }) dispatch(deleteOrder(itemId)); console.log(itemId); };Entonces, ¿qué está sucediendo hasta ahora? Los elementos se eliminan, pero el componente no cambia, solo cuando actualizo la página, el elemento desaparece. Además, todos los pedidos vuelven a la primera columna.
Entonces, ¿qué hago para renderizar el componente correctamente y que las órdenes mantengan sus posiciones?
Gracias de antemano