Блог

У меня следующее состояние

 const state = {  courses: [],  series: [],  course: {  title: 'testing',  course_notes: [  {  id: 1,  note: "one" // want to edit this  },  {  id: 2,  note: "two"  }  ] } }  

Я хочу измениться state.course.course_notesp[0].name

Я никогда полностью не понимал, как это работает, прочитал много учебных пособий, я чувствую, что знаю, как это работает, но это всегда сбивает меня с толку. Это то, что я пытаюсь

 const m = {  ...state,   course: {  course_notes:[  ...state.course.course_notes,  state.course.course_notes.find(n =gt; n.id === 1).note = "edited"  ]  } }  

Это, кажется, добавляет edited дополнительный узел. state.course.course_notes.length в конце концов, так оно и есть 3 .

Вы используете оператор распространения для массивов, как и для объектов.

Предположим, у вас есть объект

 const obj = { a: 1, b: 2 }  

Если вы скажете:

 {...obj, a: 2}  

То, что вы говорите, это:

 { a: 1, b: 2, a: 2 }  

Свойство a определено дважды, но второе переопределяет первое.

Однако, если вы сделаете что-то подобное для массива, результат будет другим:

 const arr = [1, 2]; const newArr = [...arr, arr[0]];  // here the result would be [1, 2, 1]  

Вот почему, когда вы говорите:

 course_notes:[  ...state.course.course_notes,  state.course.course_notes.find(n =gt; n.id === 1).note = "edited" ]  

что он делает, так это добавляет дополнительный элемент в массив.

Вместо этого вам следует создать измененную версию массива, например, с помощью map

 course_notes: state.course.course_notes.map(el =gt; {  if (el.id === 1) {  el.note = 'edited';  }  return el; });  

Существует множество способов изменить состояние вашего магазина, чтобы обновить один элемент course_notes.

Если бы мы предполагали, что идентификаторы уникальны, я бы сопоставил предыдущий массив, изменив элемент с идентификатором 1.

 .... course_notes: state.course.course_notes.map(x =gt; x === 1  ? { ...x, note: 'edited' }   : x ) ...