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
onClick= {saveEdit}
ni tampoco veo que lo estes obteniendo de alguna forma