如何更改 redux 状态的嵌套对象值

Question

我有以下状态

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 => n.id === 1).note = "edited"
    ]
  }
}

这似乎添加了 edited 作为一个额外的节点。 state.course.course_notes.length 最终成为 3。

Answer 1

您可以通过多种方式修改商店状态以更新 course_notes 的一个元素。

如果我们假设 id 是唯一的，我会映射修改 id 为 1 的元素的前一个数组。

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

Answer 2

您正在像对对象一样对数组使用展开运算符。

假设你有一个对象

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 => n.id === 1).note = "edited"
]

它的作用是向数组中添加一个额外的元素。

您应该做的是创建数组的修改版本，例如使用 map

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

如何更改 redux 状态的嵌套对象值

How to change a nested object value of a redux state

javascript

redux