0

Estoy haciendo una aplicación tipo Trello y estoy tratando de cambiar el título a una carta.

Me sale el error:

Invariant failed: A state mutation was detected inside a dispatch, in the path: lists.0.cards.0.text. Take a look at the reducer(s) handling the action {"type":"EDIT_CARD","payload":{"id":"card-0","listID":"list-0","newText":"adios"}}.

He probado el bucle con el método map() con Javascript Vanilla y me funciona, pero al implementarlo en mi código de React me salta el error.

Este es el archivo donde se edita la carta, recibo los parámetros por la constante TrelloCard:

const TrelloCard = ({ text, id, index, listID, dispatch }) => {
const [onTextEdit, setOnTextEdit] = useState(text)

const handleChangeEdit = (e) => {
    setOnTextEdit(e.target.value)
  };

  const saveEdit = (e) => {
    e.preventDefault();
    dispatch(editCardAction(id, listID, onTextEdit));
  };

  const editCard =() => {
    return (
    <div
      <textarea          
        text = {onTextEdit}
        autoFocus
        onChange={handleChangeEdit}
      >
        </textarea>
      <button
        onClick= {saveEdit}
      > Guardar
      </button>          
    </div>
    )
  }

Cuando guardamos el texto hacemos dispatch. El parámetro que pasamos de "id" es la identidad de la carta, "listID" es la lista en la que se encuentra la carta, "onTextEdit" es el texto nuevo que debemos poner.

En el archivo action realizamos la siguiente acción:

export const editCardAction = (id, listID, newText) => {
  return {
    type: 'EDIT_CARD',
    payload : {id, listID, newText}
  }
}

En reducer hago dos bucles con map para acceder al texto de la carta que coincida con la "id" dentro de la lista correcta "listID", al acceder al texto lo cambio por newText

Este es el archivo reducer:

let cardID = 2;
    let listID = 1;
    const initialState = [
      {
        title: 'lista demo 1',
        id: 1,
        cards: [
            {
                id: 1,
                text: 'Lista tarea1'
            },
            {
                id: 2,
                text: 'lista tarea2'
            }
        ]
      },
      
    ];
    
    const listReducer = (state = initialState, action) => {
      switch (action.type) {
    case 'EDIT_CARD': {      
  const { id, listID, newText} = action.payload;
  console.log(id)
    return state.map((list) => {
      if(list.id === listID) {
        return list.cards.map(({...card}) =>{
          if(card.id === id){
            card.text = newText;
            console.log(card);
          }
          return card
        })
      }
    })
}
    default:
          return state;
    }

El plan final es poder cambiar el texto de la tarjeta, pero me da el error ¿Qué estoy haciendo mal?.

Gracias por vuestra ayuda, si hace falta algo más de código, diganmelo y lo pondré. Saludos

4
  • Yo no veo que cuando llamas a la funcion le estes pasando el parametro ID onClick= {saveEdit} ni tampoco veo que lo estes obteniendo de alguna forma
    – Agustin G.
    Commented el 11 jul. 2022 a las 12:44
  • Buenas de nuevo, es importante para saber lo que está fallando que nos indiques la linea en que falla. En el error te lo tiene que indicar. Ya que el error es que se está intentando acceder a una propiedad de un objeto nullo. También que en el primer console log, añadas state para saber la estructura del estado
    – Suso
    Commented el 11 jul. 2022 a las 13:42
  • Hola Agustin, los parámetros los llamo al formar el componente, no lo puse aqui por no complicar mucho el codigo, ahora estarán añadidos.
    – jbort
    Commented el 11 jul. 2022 a las 14:48
  • Hola de nuevo Suso, en el navegador no me dice ninguna línea de error, me saca "bundle.js:821 Uncaught TypeError: Cannot read properties of undefined (reading 'id') at bundle.js:821:26". Todas las referencias a un archivo es hacia este bundle.js. En la terminal no me da ningún error. Gracias
    – jbort
    Commented el 11 jul. 2022 a las 14:51

1 respuesta 1

1

Tienes 2 errores, uno "tonto" (no quiero faltarte al respeto, pero es una tontería) y otro en el mapeo del reducer.

  1. En el archivo action.js en la accion "editCardAction" un parámetro que recibe es listID y tu tienes ListID con L mayúscula y ese valor es undefined.

  2. En el mapeo del reducer:

     case 'EDIT_CARD': {
        const { id, listID, newText} = action.payload;
        return state.map(({...list}) => {
           if(list.id === listID) {
               const newCards = list.cards.map(({...card}) =>{
                   if(card.id === id){
                      card.text = newText;
                   }
                   return card
               })
               list.cards = newCards;
           }
           return list;
       })
    }
    

Antes, si coincidia el id de la lista, con la lista en la que modificabas una card, se retornaba el mapeo de list.cards con los cambios en la card indicada, pero list tenía mas propiedades que la lista, ahora lo que hace es si coincide la lista, se modifica la propiedad cards con el mapeo de las cards con los cambios y luego se retrona la lista coincida el listID o no;

Sugerencia, tienes un error en el reducer del dragghappened. Si cambias la linea que tienes const newState = [...state] por esto ya no te pasa

  const newState = state.map(({...list}) => {
    list.cards = list.cards.map(({...card}) => card)
    return list;
  })
15
  • No se si funciona, el primer codigo si me hace el cambio de texto en la consola, pero la vista se rompe y se queda la pantalla en blanco. El segundo no me cambia el texto. Al romperse me sale este error que tampoco he podido solucionar. Cannot read properties of undefined (reading 'map'). Gracias por tu ayuda Suso
    – jbort
    Commented el 12 jul. 2022 a las 20:24
  • Quería editar mi pregunta y sin querer edite la respuesta de Suso, no puedo eliminar ni rechazar esa edición por falta de privilegios, si alguien quisiera hacerlo por mi se lo agradeceria. Perdon por las molestias y gracias.
    – jbort
    Commented el 13 jul. 2022 a las 8:28
  • Ya he rechazado la edicion de la respuesta. De todas maneras, no se porque no te funciona. En tu código hay un error, ya que en el segundo map no devuelves el objeto card y por lo tanto el valor de cards de esa lista va a ser un array con undefined en lugar de cards. Por eso luego te da error cuando intenta leer una propiead de undefined
    – Suso
    Commented el 13 jul. 2022 a las 9:44
  • Es extraño, porque cuando hago un console.log(card) al final del código, si me sale el objeto card con el texto cambiado en la consola. Pero la aplicación se rompe y me da el error.
    – jbort
    Commented el 13 jul. 2022 a las 10:02
  • El problema esta que no devuelve el nuevo estado con el texto cambiado, pero en la consola si lo hace.
    – jbort
    Commented el 13 jul. 2022 a las 11:04

Tu Respuesta

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

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