Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/content/learn/updating-arrays-in-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -448,7 +448,7 @@ export default function List() {

在这段代码中,你先使用 `[...list]` 展开运算符创建了一份数组的拷贝值。当你有了这个拷贝值后,你就可以使用像 `nextList.reverse()` 或 `nextList.sort()` 这样直接修改原数组的方法。你甚至可以通过 `nextList[0] = "something"` 这样的方式对数组中的特定元素进行赋值。

然而,**即使你拷贝了数组,你还是不能直接修改其_内部_的元素**。这是因为数组的拷贝是浅拷贝——新的数组中依然保留了与原始数组相同的元素。因此,如果你修改了拷贝数组内部的某个对象,其实你正在直接修改当前的 state。举个例子,像下面的代码就会带来问题。
然而,**即使你拷贝了数组,你还是不能直接修改其内部的元素**。这是因为数组的拷贝是浅拷贝——新的数组中依然保留了与原始数组相同的元素。因此,如果你修改了拷贝数组内部的某个对象,其实你正在直接修改当前的 state。举个例子,像下面的代码就会带来问题。

```js
const nextList = [...list];
Expand All @@ -460,7 +460,7 @@ setList(nextList);

## 更新数组内部的对象 {/*updating-objects-inside-arrays*/}

对象并不是_真的_位于数组“内部”。可能他们在代码中看起来像是在数组“内部”,但其实数组中的每个对象都是这个数组“指向”的一个存储于其它位置的值。这就是当你在处理类似 `list[0]` 这样的嵌套字段时需要格外小心的原因。其他人的艺术品清单可能指向了数组的同一个元素!
对象并不是 _真的_ 位于数组“内部”。可能他们在代码中看起来像是在数组“内部”,但其实数组中的每个对象都是这个数组“指向”的一个存储于其它位置的值。这就是当你在处理类似 `list[0]` 这样的嵌套字段时需要格外小心的原因。其他人的艺术品清单可能指向了数组的同一个元素!

**当你更新一个嵌套的 state 时,你需要从想要更新的地方创建拷贝值,一直这样,直到顶层。** 让我们看一下这该怎么做。

Expand Down Expand Up @@ -776,7 +776,7 @@ updateMyTodos(draft => {
});
```

这是因为你并不是在直接修改_原始的_ state,而是在修改 Immer 提供的一个特殊的 `draft` 对象。同理,你也可以为 `draft` 的内容使用 `push()` 和 `pop()` 这些会直接修改原值的方法。
这是因为你并不是在直接修改原始的 state,而是在修改 Immer 提供的一个特殊的 `draft` 对象。同理,你也可以为 `draft` 的内容使用 `push()` 和 `pop()` 这些会直接修改原值的方法。

在幕后,Immer 总是会根据你对 `draft` 的修改来从头开始构建下一个 state。这使得你的事件处理程序非常的简洁,同时也不会直接修改 state。

Expand Down