Часть инструкции switch из моего редуктора работает неожиданным образом, пожалуйста, посмотрите на код

Question

У меня есть этот код в моем редукторе (его поведение было обнаружено в процессе создания)

case 'UPDATE_GOAL':
   state.goals.map( el => {
      if (el.id === id*1) {el.goal = updatedGoal.goal}
   })
   return state

он работает правильно, но я запутался. Функция map () должна вернуть новый массив, тогда я должен обновить состояние новым массивом, но в этом случае кажется, что он возвращает новый массив непосредственно объекту, а состояние обновляется «неправильным способом»

пожалуйстапомогите понять как это работает

Answer 1

Да, карта возвращает новый массив. Но проблема в том, что вы изменяете объекты, которые находятся в этом массиве, вы не можете изменить el с помощью el.goal = updatedGoal.goal.

Когда вы используете функцию map, почти всегда вы просто должны вернуть что-то из нееи не изменяйте базовые элементы напрямую.

Попробуйте сделать это точно в соответствии с рецептами редуксов :

case 'UPDATE_GOAL':
    return state.goals.map((el, index) => {
        if (el.id !== id*1) {
            // This isn't the item we care about - keep it as-is
            return el
        }

        // Otherwise, this is the one we want - return an updated value
        return {
            ...el,
            goal: updatedGoal.goal
        }
    })