tengo el siguiente estado
const state = { courses: [], series: [], course: { title: 'testing', course_notes: [ { id: 1, note: "one" // want to edit this }, { id: 2, note: "two" } ] } } Quiero cambiar state.course.course_notesp[0].name
Nunca entendí completamente cómo funciona esto, leí muchos tutoriales, siento que sé cómo funciona, pero siempre me hace tropezar. esto es lo que estoy intentando
const m = { ...state, course: { course_notes:[ ...state.course.course_notes, state.course.course_notes.find(n => n.id === 1).note = "edited" ] } } Eso parece agregar edited como un nodo adicional. state.course.course_notes.length termina siendo 3 .
Hay muchas maneras de modificar el estado de su tienda para actualizar un elemento de las notas del curso.
Si supusiéramos que los id son únicos, mapearía la matriz anterior modificando el elemento con id 1.
.... course_notes: state.course.course_notes.map(x => x === 1 ? { ...x, note: 'edited' } : x ) ...Está utilizando el operador de dispersión para matrices como lo haría con objetos.
Suponga que tiene un objeto
const obj = { a: 1, b: 2 }Si usted dice:
{...obj, a: 2}Lo que estás diciendo es:
{ a: 1, b: 2, a: 2 } La propiedad a se define dos veces, pero la segunda anula a la primera.
Sin embargo, si hace algo similar para una matriz, el resultado sería diferente:
const arr = [1, 2]; const newArr = [...arr, arr[0]]; // here the result would be [1, 2, 1]Por eso cuando dices:
course_notes:[ ...state.course.course_notes, state.course.course_notes.find(n => n.id === 1).note = "edited" ]lo que hace es agregar un elemento extra a la matriz.
En su lugar, lo que debe hacer es crear una versión modificada de la matriz, por ejemplo, usando map
course_notes: state.course.course_notes.map(el => { if (el.id === 1) { el.note = 'edited'; } return el; });