estoy estudiando React y me he encontrado con un problema que no se como resolverlo. Tengo una aplicación tipo Trello con React y Redux, tengo que poder eliminar las cartas cuando el usuario le da a un botón. Lo que he intentado y no me ha salido. A ver si alguien puede ayudarme y resolverme esta duda. El error que me sale en consola es el siguiente: Uncaught TypeError: Cannot read properties of undefined (reading 'cards'). He actualizado el código tal y como me esta quedando, pero sigue sin funcionar. Tambien es verdad que cada vez que intento cambiar algo me da un error distinto y es algo de la lógica que no acabo de comprender.
Este es el componente de la lista donde se crean las cartas de tareas.
import React from "react";
import "./TrelloList.scss";
import TrelloCard from "../TrelloCard/TrelloCard.jsx";
import ButtonAction from "../ButtonAction/ButtonAction";
import { Draggable, Droppable } from "react-beautiful-dnd";
import { connect } from "react-redux";
//Creamos la vista de la lista y la funcionalidad para arrastrarla
const TrelloList = ({ title, cards, listID, index }) => {
return (
<Draggable draggableId={String(listID)} index={index}>
{(provided) => (
<div
{...provided.draggableProps}
ref={provided.innerRef}
{...provided.dragHandleProps}
>
<Droppable droppableId={String(listID)}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}>
<div className="container">
<h4 className="tarjeta_titulo">{title}</h4>
<div>
{cards.map((card, index) => (
<TrelloCard
text={card.text}
key={card.id}
index={index}
id={card.id}
listID = {listID}
/>
))}
{provided.placeholder}
<ButtonAction listID={listID} />
</div>
</div>
</div>
)}
</Droppable>
</div>
)}
</Draggable>
);
};
export default connect()(TrelloList);
Este es el reducer de Redux
import { combineReducers } from "redux";
import listReducer from './listReducer';
export default combineReducers({
lists: listReducer
});
El listReducer
let listID = 0;
let cardID = 0;
const initialState = [
];
const listReducer = (state = initialState, action) => {
switch (action.type) {
case "ADD_LIST":
const newList = {
title: action.payload,
cards: [],
id: `list-${listID}`,
};
listID += 1;
return [...state, newList];
case "ADD_CARD": {
const newCard = {
text: action.payload.text,
id: `card-${cardID}`,
};
cardID += 1;
const newState = state.map((list) => {
if (list.id === action.payload.listID) {
return {
...list,
cards: [...list.cards, newCard],
};
} else {
return list;
}
});
return newState;
}
case 'DELETE_CARD': {
const { listID, id } = action.payload;
const list = state[listID];
const newCards = list.cards.filter(cardID => cardID !== id);
return { ...state, [listID]: { ...list, cards: newCards } };
}
case "DRAGG_HAPPENED": {
const {
droppableIdStart,
droppableIdEnd,
droppableIndexStart,
droppableIndexEnd,
type
} = action.payload;
const newState = [...state];
//Arrastre entre listas
if (type === 'list') {
const list = newState.splice(droppableIndexStart, 1);
newState.splice(droppableIndexEnd, 0, ...list);
return newState;
}
//Arrastre en la misma lista
if (droppableIdStart === droppableIdEnd) {
const list = state.find((list) => droppableIdStart === list.id);
const card = list.cards.splice(droppableIndexStart, 1);
list.cards.splice(droppableIndexEnd, 0, ...card);
}
//Arrastre en otra lista
if (droppableIdStart !== droppableIdEnd) {
const listStart = state.find((list) => droppableIdStart === list.id);
const card = listStart.cards.splice(droppableIndexStart, 1);
const listEnd = state.find((list) => droppableIdEnd === list.id);
listEnd.cards.splice(droppableIndexEnd, 0, ...card);
}
return newState;
}
default:
return state;
}
};
export default listReducer;
La action del redux
export const deleteCardAction = (id,listID) => {
return {
type: 'DELETE_CARD',
payload: {id, listID}
};
Y el componente donde se encuentra el boton de deleteCard, que es el que no me funciona y donde me da el error que menciono arriba.
import React from "react";
import "./TrelloCard.scss";
import { Draggable } from "react-beautiful-dnd";
import { connect } from "react-redux";
import { deleteCardAction } from "../../services/redux/action";
//Creamos la vista de la tarea y la funcionalidad para arrastrarla
const TrelloCard = ({ text, id, index, listID, dispatch }) => {
const deleteCard = (e)=> {
dispatch(deleteCardAction(id, listID));
}
return (
<Draggable draggableId={String(id)} index={index}>
{(provided) => (
<div
className="container-carta"
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div className='container-tarea'>
<p className="cartascss">
{text}
</p>
<button onMouseDown={(deleteCard)}>
❌
</button>
</div>
</div>
)}
</Draggable>
);
};
export default connect()(TrelloCard);
No se que se me escapa o que es lo que no acabo de comprender en Redux, si alguien quisiera ayudarme. Si hace falta que ponga más código avísenme. Pueden ver el repositorio completo en https://github.com/jbortweb/trello_react Gracias