1

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

2 respuestas 2

1
+50

he estado probando tu código y el problema lo tienes en el reducer.

Prueba con este código:

case 'DELETE_CARD': {

  const { listID, id } = action.payload;
  return state.map(({...x}) => {
    if(x.id === listID){
      x.cards = x.cards.filter(y => y.id !== id);
    }
    return x;
  })
}
3
  • Ohhh, eres un crack. Muchas gracias. Llevaba dias sin poder salir de este pozo. Te importaria desarrollarme un poco el codigo. Para ver si le pillo la lógica.
    – jbort
    el 7 jul. 2022 a las 20:39
  • El problema que tenías es que estabas intentando acceder mal al estado de redux. Tu intentabas acceder como si fuera un objeto y erra un array de objetos, por eso list te devolvía null. Aquí lo que se hace es devolver un array de la misma longitud(ya que no se elimina una lista, si no una card) que es el array de listas, y para cada lista busca la que tenga el mismo id de lista, si coincide, modificas la lista de cards para que devuelva todas menos la que coincida con el id de card.
    – Suso
    el 7 jul. 2022 a las 20:45
  • Gracias Suso, me ha quedado mucho mas claro. Saludos
    – jbort
    el 7 jul. 2022 a las 20:51
1

El error que te da, creo que es porque tienes mal desestructurado. No se si al componente trellolist cuando lo llamas le pasas una propiedad props, si no es así y lo que quieres es recuperar el resto de props, debes de hacer así: const TrelloList = ({ title, cards, listID, index, ...props }).

6
  • Gracias por responderme. Le puse los puntos y el error se quito, ahora me sale el siguiente. Warning: Each child in a list should have a unique "key" prop. Y creo que ya tiene una key propia. No se si esta relacionado con el error anterior o es otra cosa.
    – jbort
    el 29 jun. 2022 a las 9:07
  • He subsanado el error de consola, ahora no me da ningún error, pero el botón no funciona.
    – jbort
    el 29 jun. 2022 a las 16:00
  • No se a que botón te refieres. Si es al que llamas a delete card, pues prueba a quitarle los paréntesis. También puede ser porque onMouseDown va con minúsculas onmousedown
    – Suso
    el 29 jun. 2022 a las 22:03
  • Si, es el boton deteteCard, y los eventos en React se nombran usando camelCase, en vez de minúsculas.
    – jbort
    el 30 jun. 2022 a las 6:13
  • @jbort proba pasando onMouseDown={deleteCard()} o onMouseDown={() => deleteCard()}
    – Agustin G.
    el 7 jul. 2022 a las 18:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.