From 702b1b281d1a44f2a7e45f67017aa41d5f5f00db Mon Sep 17 00:00:00 2001
From: zhuye <zhuye256@163.com>
Date: Sat, 6 Nov 2021 11:51:48 +0800
Subject: [PATCH 01/11] =?UTF-8?q?=E5=AE=8C=E6=88=901-400=E8=A1=8C=E7=BF=BB?=
 =?UTF-8?q?=E8=AF=91=E5=88=9D=E7=A8=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/learn/updating-arrays-in-state.md   | 104 +++++++++---------
 1 file changed, 53 insertions(+), 51 deletions(-)

diff --git a/beta/src/pages/learn/updating-arrays-in-state.md b/beta/src/pages/learn/updating-arrays-in-state.md
index 429a17d81e..316b525b7c 100644
--- a/beta/src/pages/learn/updating-arrays-in-state.md
+++ b/beta/src/pages/learn/updating-arrays-in-state.md
@@ -1,52 +1,52 @@
 ---
-title: Updating Arrays in State
+title: 修改 State 中的数组
 ---
 
 <Intro>
 
-Arrays are another type of mutable JavaScript objects you can store in state and should treat as immutable. Just like with objects, when you want to update an array stored in state, you need to create a new one (or make a copy of an existing one), and then set state to use the new array.
+数组是另外一种可以存储在 state 中的 JavaScript 对象，它虽然是可变的，但是却应该被视为不可变的。同对象一样，当你想要更新 state 中的数组的时候，你需要创建一个新的数组（或者将已有的数组复制成一个新的数组），并将这个新数组设置到 state 上。
 
 </Intro>
 
 <YouWillLearn>
 
-- How to add, remove, or change items in an array in React state
-- How to update an object inside of an array
-- How to make array copying less repetitive with Immer
+- 如何添加、删除或者修改 React state 中的数组中某个元素的值
+- 如何更新数组中某个类型为对象的元素
+- 如何使用 Immer 来降低数组重复复制的次数
 
 </YouWillLearn>
 
-## Updating arrays without mutation
+## 不使用 mutation 的情况下更新数组
 
-In JavaScript, arrays are just another kind of object. [Like with objects](/learn/updating-objects-in-state), **you should treat arrays in React state as read-only**. This means that you shouldn't reassign items inside an array like `arr[0] = 'bird'`, and you also shouldn't use methods that mutate the array, such as `push()` and `pop()`.
+在 JavaScript 中，数组就是对象的一种. [同对象一样](/learn/updating-objects-in-state), **你需要将 React state 中的数组视为只读的**。这意味着你不应该使用类似于 `arr[0] = 'bird'` 这样的方式来修改数组中的某个元素，你也不应该使用会改变原始数组的方法，例如 `push()` 和 `pop()`。
 
-Instead, every time you want to update an array, you'll want to pass a *new* array to your state setting function. To do that, you can create a new array from the original array in your state by calling its non-mutating methods like `filter()` and `map()`. Then you can set your state to the resulting new array.
+取而代之的，每次你想要更新一个数组时，你需要把一个*新*的数组传入 state 的 setting 方法中。为了实现这一点，你可以通过使用一些不会改变原始数组的方法，例如 `filter()` 和 `map()` ，从原始数组创建一个新的数组。之后你就可以把这个新创建的数组设置到 state 上。
 
-Here is a reference table of common array operations. When dealing with arrays inside React state, you will need to avoid the methods in the left column, and instead prefer the methods in the right column:
+这里是数组相关操作的一张参考表。当你对 React state 中的数组进行操作时，你需要避免使用表格左侧的方法，而尽量使用表格右侧的方法：
 
-|         | avoid (mutates the array) | prefer (returns a new array) |
+|         | 避免使用 (会改变原始数组) | 推荐使用 (会返回一个新数组） |
 |---------|----------------|-------------------|
-| adding    | `push`, `unshift` | `concat`, `[...arr]` spread syntax ([example](#adding-to-an-array))|
-| removing | `pop`, `shift`, `splice` | `filter`, `slice` ([example](#removing-from-an-array))
-|replacing| `splice`, `arr[i] = ...` assignment | `map` ([example](#replacing-items-in-an-array))          |
-|sorting| `reverse`, `sort` | copy the array first ([example](#making-other-changes-to-an-array)) |
+| 添加元素 | `push` ， `unshift` | `concat` ， `[...arr]` 展开语法 （[例子](#向数组中添加元素)）|
+| 删除元素 | `pop` ， `shift` ， `splice` | `filter` ， `slice` （[例子](#从数组中删除元素)）
+| 替换元素 | `splice` ， `arr[i] = ...` 赋值 | `map` （[例子](#替换数组中的元素)） |
+| 排序 | `reverse` ， `sort` | 先将数组复制一份 （[例子](#其他改变数组的情况)） |
 
-Alternatively, you can [use Immer](#write-concise-update-logic-with-immer) which lets you use methods from both columns.
+或者，你可以[使用 Immer](#使用-Immer-编写简洁的更新逻辑) ，这样你便可以使用表格中的所有方法了。
 
 <Gotcha>
 
-Unfortunately, [`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) and [`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) are named similarly but are very different:
+不幸的是，[`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 和 [`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 虽然名字相似，但是却迥然不同：
 
-* `slice` lets you copy an array or a part of it.
-* `splice` **mutates** the array (to insert or delete items).
+* `slice` 使得你可以复制数组或者它的子数组。
+* `splice` **会改变** 原始数组（插入或者删除元素）。
 
-In React, you will be using `slice` (no `p`!) a lot more often because you don't want to mutate objects or arrays in state. [Updating Objects](/learn/updating-objects-in-state) explains what mutation is and why it's not recommended for state.
+在 React 中，更多情况下你会使用 `slice` （没有 `p` ！），因为你不想改变 state 中的对象或数组。[更新对象](/learn/updating-objects-in-state)这一章节解释了什么是 mutation 以及为什么不推荐在 state 里使用它。
 
 </Gotcha>
 
-### Adding to an array
+### 向数组中添加元素
 
-`push()` will mutate an array, which you don't want:
+`push()` 会改变原始数组，你应该避免使用它：
 
 <Sandpack>
 
@@ -61,7 +61,7 @@ export default function List() {
 
   return (
     <>
-      <h1>Inspiring sculptors:</h1>
+      <h1>令人惊叹的雕塑家们：</h1>
       <input
         value={name}
         onChange={e => setName(e.target.value)}
@@ -72,7 +72,7 @@ export default function List() {
           id: nextId++,
           name: name,
         });
-      }}>Add</button>
+      }}>添加</button>
       <ul>
         {artists.map(artist => (
           <li key={artist.id}>{artist.name}</li>
@@ -89,18 +89,20 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-Instead, create a *new* array which contains the existing items *and* a new item at the end. There are multiple ways to do this, but the easiest one is to use the `...` [array spread](a-javascript-refresher#array-spread) syntax:
+取而代之的，创建一个*新*数组，新数组包含了原始数组的所有元素并在末尾添加了一个新的元素。这一步的实现有很多种不同的方法，其中最简单的就是使用
+
+Instead, create a *new* array which contains the existing items *and* a new item at the end. There are multiple ways to do this, but the easiest one is to use the `...` [数组展开](a-javascript-refresher#array-spread)语法:
 
 ```js
-setArtists( // Replace the state
-  [ // with a new array
-    ...artists, // that contains all the old items
-    { id: nextId++, name: name } // and one new item at the end
+setArtists( // 使用新数组
+  [ // 替代原数组
+    ...artists, // 新数组包含原数组的所有元素
+    { id: nextId++, name: name } // 并在末尾添加了一个新的元素
   ]
 );
 ```
 
-Now it works correctly:
+现在代码可以正常运行了：
 
 <Sandpack>
 
@@ -115,7 +117,7 @@ export default function List() {
 
   return (
     <>
-      <h1>Inspiring sculptors:</h1>
+      <h1>令人惊叹的雕塑家们：</h1>
       <input
         value={name}
         onChange={e => setName(e.target.value)}
@@ -126,7 +128,7 @@ export default function List() {
           ...artists,
           { id: nextId++, name: name }
         ]);
-      }}>Add</button>
+      }}>添加</button>
       <ul>
         {artists.map(artist => (
           <li key={artist.id}>{artist.name}</li>
@@ -143,20 +145,20 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-The array spread operator also lets you prepend an item by placing it *before* the original `...artists`:
+使用数组展开运算符，也可以做到把新添加的元素放在原数组 `...artists` 的前面：
 
 ```js
 setArtists([
   { id: nextId++, name: name },
-  ...artists // Put old items at the end
+  ...artists // 将原数组中的元素放在后面
 ]);
 ```
 
-In this way, spread can do the job of both `push()` by adding to the beginning of an array and `unshift()` by adding to the end of an array. Try it in the sandbox above!
+这样一来，展开操作既可以实现类似于 `push()` 的操作，将新元素添加到原数组的末尾，也可以实现类似于 `unshift()` 的操作，将新元素插入到原数组开头。你可以在下面的 sandbox 中尝试一下！
 
-### Removing from an array
+### #从数组中删除元素
 
-The easiest way to remove an item from an array is to *filter it out*. In other words, you will produce a new array that will not contain that item. To do this, use the `filter` method, for example:
+从数组中删除一个元素最简单的方法就是将它*过滤出去*。换句话说，你需要创建一个不包含这个元素的新数组。为了实现这一点，可以使用 `filter` 方法，例如：
 
 <Sandpack>
 
@@ -176,7 +178,7 @@ export default function List() {
 
   return (
     <>
-      <h1>Inspiring sculptors:</h1>
+      <h1>令人惊叹的雕塑家们：</h1>
       <ul>
         {artists.map(artist => (
           <li key={artist.id}>
@@ -188,7 +190,7 @@ export default function List() {
                 )
               );
             }}>
-              Delete
+              删除
             </button>
           </li>
         ))}
@@ -200,7 +202,7 @@ export default function List() {
 
 </Sandpack>
 
-Click the "Delete" button a few times, and look at its click handler.
+点击几次“删除”按钮，再查看一下处理点击事件的代码。
 
 ```js
 setArtists(
@@ -208,13 +210,13 @@ setArtists(
 );
 ```
 
-Here, `artists.filter(s => s.id !== artist.id)` means "create an array that consists of those `artists` whose IDs are different from `artist.id`." In other words, each artist's "Delete" button will filter _that_ artist out of the array, and then request a re-render with the resulting array. Note that `filter` does not modify the original array.
+在这里，`artists.filter(s => s.id !== artist.id)` 这段代码表示 “创建一个新的数组，数组中的 `artists` 的id不同于 `artist.id` ”。换句话说，每个 artist 的“删除”按钮会把这位 artist 从原始数组中过滤掉，并使用新生成的数组再次进行渲染。值得注意的是，`filter` 不会改变原始数组。
 
-### Transforming an array
+### 变换一个数组
 
-If you want to change some or all items of the array, you can use `map()` to create a **new** array. The function you will pass to `map` can decide what to do with each item, based on its data or its index (or both).
+如果你想改变数组中的某些或全部元素，你可以使用 `map()` 方法来创建一个新数组。你传入 `map` 方法的函数可以决定该如何依照每个元素的数组和索引对他们进行处理。
 
-In this example, an array holds coordinates of two circles and a square. When you press the button, it moves only the circles down by 100 pixels. It does this by producing a new array of data using `map()`:
+在下面的例子中，数组中存储了两个圆形和一个正方形的坐标，当你点击按钮时，会将所有的原型向下移动100个像素的长度。这是通过使用 `map()` 方法创建一个新数组来实现的。
 
 <Sandpack>
 
@@ -252,7 +254,7 @@ export default function ShapeEditor() {
   return (
     <>
       <button onClick={handleClick}>
-        Move circles down!
+        所有圆形向下移动！
       </button>
       {shapes.map(shape => (
         <div style={{
@@ -278,11 +280,11 @@ body { height: 300px; }
 
 </Sandpack>
 
-### Replacing items in an array
+### 替换数组中的元素
 
-It is particularly common to want to replace one or more items in an array. Assignments like `arr[0] = 'bird'` are mutating the original array, so instead you'll want to use `map` for this as well.
+替换数组中一个或多个元素是非常常见的操作。类似 `arr[0] = 'bird'` 这样的赋值语句会改变原始数组，所以这种情况下，你也应该考虑使用 `map` 方法。
 
-To replace an item, create a new array with `map`. Inside your `map` call, you will receive the item index as the second argument. Use it to decide whether to return the original item (the first argument) or something else:
+想要替换一个元素，需要使用 `map` 方法创建一个新数组。在传入 `map` 方法的函数里，第二个参数是元素的索引。使用索引来判断最终是返回当前元素还是替换成其他的东西：
 
 <Sandpack>
 
@@ -332,11 +334,11 @@ button { margin: 5px; }
 
 </Sandpack>
 
-### Inserting into an array
+### 向数组中插入元素
 
-Sometimes, you may want to insert an item at a particular position that's neither at the beginning nor at the end. To do this, you can use the `...` array spread operator together with the `slice()` method. The `slice()` method lets you cut a "slice" of the array. To insert an item, you will create an array that spreads the slice _before_ the insertion point, then the new item, and then the rest of the original array.
+有时，你需要向数组中特定位置插入一个元素，这个位置既不是数组开头，也不是数组的末尾。为了实现这个操作，你可以将数组展开运算符 `...` 和 `slice()` 方法结合起来使用。`slice()` 方法使得你可以从数组中取出一部分。为了将元素插入数组，你需要三个部分，第一部分是原数组在插入点之前的部分，第二部分是要插入的元素，第三部分是原数组在插入点之后的部分，将这三部分结合起来就构成了我们需要的最终数组。
 
-In this example, the Insert button always inserts at the index `1`:
+下面的例子中，插入按钮总是会将元素插入到数组中索引为 `1` 的地方。
 
 <Sandpack>
 
@@ -378,7 +380,7 @@ export default function List() {
         onChange={e => setName(e.target.value)}
       />
       <button onClick={handleClick}>
-        Insert
+        插入
       </button>
       <ul>
         {artists.map(artist => (

From dfc1a2ab42632d1fb83ac967bcc80eadd12f467b Mon Sep 17 00:00:00 2001
From: zhuye <zhuye256@163.com>
Date: Mon, 8 Nov 2021 21:57:21 +0800
Subject: [PATCH 02/11] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=88=9D=E7=A8=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/learn/updating-arrays-in-state.md   | 109 +++++++++---------
 1 file changed, 55 insertions(+), 54 deletions(-)

diff --git a/beta/src/pages/learn/updating-arrays-in-state.md b/beta/src/pages/learn/updating-arrays-in-state.md
index 316b525b7c..839b949594 100644
--- a/beta/src/pages/learn/updating-arrays-in-state.md
+++ b/beta/src/pages/learn/updating-arrays-in-state.md
@@ -398,13 +398,13 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-### Making other changes to an array
+### 其他改变数组的情况
 
-There are some things you can't do with the spread operator and non-mutating methods like `map()` and `filter()` alone. For example, you may want to reverse or sort an array. The JavaScript `reverse()` and `sort()` methods are mutating the original array, so you can't use them directly.
+有些时候，你无法仅仅依靠扩展运算符和 `map()` 或者 `filter()` 等不会改变原数组的方法来达到想要的结果。例如，你可能想实现反转数组的操作。而 JavaScript 中的 `reverse()` 和 `sort()` 方法会改变原数组，所以你不能直接地使用他们。
 
-**However, you can copy the array first, and then make changes to it.**
+**但是，你可以先将数组复制一份，再执行对应的操作。**
 
-For example:
+例如：
 
 <Sandpack>
 
@@ -430,7 +430,7 @@ export default function List() {
   return (
     <>
       <button onClick={handleClick}>
-        Reverse
+        反转
       </button>
       <ul>
         {list.map(artwork => (
@@ -444,27 +444,27 @@ export default function List() {
 
 </Sandpack>
 
-Here, you use the `[...list]` spread operator to create a copy of the original array first. Now that you have a copy, you can use mutating methods like `nextList.reverse()` or `nextList.sort()`, or even assign individual items with `nextList[0] = "something"`.
+在这段代码中，你先使用 `[...list]` 扩展运算符创建了数组的一份拷贝。当你创建了一个新数组之后，便可以对新的数组实行 `nextList.reverse()` 或 `nextList.sort()` 的操作。你甚至还可以直接使用 `nextList[0] = "something"` 对数组中某个元素进行赋值。
 
-However, **even if you copy an array, you can't mutate existing items _inside_ of it directly**. This is because copying is shallow--the new array will contain the same items as the original one. So if you modify an object inside the copied array, you are mutating the existing state. For example, code like this is a problem.
+然而，即便你将数组拷贝了一份，你还是不能直接改变其中的元素。这是因为数组的拷贝是浅拷贝，新的数组中也包含了原数组中的元素。因此，如果你修改了拷贝后数组中某个类型为对象的元素，也会改变当前的 state 。例如，下面的代码会造成一些问题。
 
 ```js
 const nextList = [...list];
-nextList[0].seen = true; // Problem: mutates list[0]
+nextList[0].seen = true; // 问题所在：会改变 list[0] 的值
 setList(nextList);
 ```
 
-Although `nextList` and `list` are two different arrays, **`nextList[0]` and `list[0]` point to the same object**. So by changing `nextList[0].seen`, you are also changing `list[0].seen`. This is a state mutation, which you should avoid! You can solve this issue in a similar way to [updating nested JavaScript objects](docs/updating-objects-in-state#updating-a-nested-object)--by copying individual items you want to change instead of mutating them. Here's how.
+虽然 `nextList` 和 `list` 是两个不同的数组，**`nextList[0]` 和 `list[0]` 却指向了同一个对象**。因此，当你修改 `nextList[0].seen` 的时候，也会改变 `list[0].seen` 的值。这就是 state mutation ，你应该避免这种操作！你可以用[更新嵌套的 JavaScript 对象](docs/updating-objects-in-state#updating-a-nested-object)中提到的方法来解决这个问题，方法就是将你想要修改的那个元素拷贝一份出来，并进行修改。下面是具体的操作。
 
-## Updating objects inside arrays
+## 更新数组中的对象
 
-Objects are not _really_ located "inside" arrays. They might appear to be "inside" in code, but each object in an array is a separate value, to which the array "points". This is why you need to be careful when changing nested fields like `list[0]`. Another person's artwork list may point to the same element of the array!
+对象并不是_真的_包含在数组中。他们在代码层面看起来是在数组中，但是数组中的每个对象都有着额外的值，数组中的元素只是指向了这个值。这就是当你在处理类似于 `list[0]` 这样的嵌套字段时需要格外注意的原因。两个数组中的不同元素可能指向了同一个对象！
 
 <!-- TODOODLE -->
 
-**When updating nested state, you need to create copies from the point where you want to update, and all the way up to the top level.** Let's see how this works.
+**当你更新一个嵌套的 state 时，你需要从需要更新的地方开始自底向上创建一份完整的拷贝。** 让我们看一下具体是怎么操作的。
 
-In this example, two separate artwork lists have the same initial state. They are supposed to be isolated, but because of a mutation, their state is accidentally shared, and checking a box in one list affects the other list:
+在下面的例子中，两个不同的艺术品列表有着相同的初始 state 。他们本应该互不影响，但是因为 mutation 的存在，他们共享了同一个 state ，改变其中的一个对象的某个属性，也会影响另外一个对象：
 
 <Sandpack>
 
@@ -544,34 +544,34 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-The problem is in code like this:
+问题出在下面这段代码中:
 
 ```js
 const myNextList = [...myList];
 const artwork = myNextList.find(a => a.id === artworkId);
-artwork.seen = nextSeen; // Problem: mutates an existing item
+artwork.seen = nextSeen; // 问题在于: mutates an existing item
 setMyList(myNextList);
 ```
 
-Although the `myNextList` array itself is new, the *items themselves* are the same as in the original `myList` array. So changing `artwork.seen` changes the *original* artwork item. That artwork item is also in `yourArtworks`, which causes the bug. Bugs like this can be difficult to think about, but thankfully they disappear if you avoid mutating state.
+虽然 `myNextList` 这个数组是新创建的，但是其*内部的元素*与原数组 `myList` 是相同的。因此，当修改 `artwork.seen` 的值时，也会改变原数组中对应的 artwork 对象。而 `yourArtworks` 中指向的也是同一个 artwork 对象，这样就会带来问题。这样的问题有时很难被察觉到，但庆幸的是，如果你避免改变 state，它们就会消失。
 
-**You can use `map` to substitute an old item with its updated version without mutation.**
+**你可以使用 `map` 方法在不触及 mutation 的情况下将一个旧的元素替换成新的值**
 
 ```js
 setMyList(myList.map(artwork => {
   if (artwork.id === artworkId) {
-    // Create a *new* object with changes
+    // 创建一个全新的对象
     return { ...artwork, seen: nextSeen };
   } else {
-    // No changes
+    // 不做任何改变
     return artwork;
   }
 });
 ```
 
-Here, `...` is the object spread syntax used to [create a copy of an object](/learn/updating-objects-in-state#copying-objects-with-the-spread-syntax).
+此处的 `...` 是一个对象展开语法，用来[创建一个对象的拷贝](/learn/updating-objects-in-state#copying-objects-with-the-spread-syntax).
 
-With this approach, none of the existing state items are being mutated, and the bug is fixed:
+通过这种方式，没有任何现有的 state 中的元素会被改变，也就不会再产生任何问题了。
 
 <Sandpack>
 
@@ -594,10 +594,10 @@ export default function BucketList() {
   function handleToggleMyList(artworkId, nextSeen) {
     setMyList(myList.map(artwork => {
       if (artwork.id === artworkId) {
-        // Create a *new* object with changes
+        // 创建一个全新的对象
         return { ...artwork, seen: nextSeen };
       } else {
-        // No changes
+        // 不做任何改变
         return artwork;
       }
     }));
@@ -606,10 +606,10 @@ export default function BucketList() {
   function handleToggleYourList(artworkId, nextSeen) {
     setYourList(yourList.map(artwork => {
       if (artwork.id === artworkId) {
-        // Create a *new* object with changes
+        // 创建一个全新的对象
         return { ...artwork, seen: nextSeen };
       } else {
-        // No changes
+        // 不做任何改变
         return artwork;
       }
     }));
@@ -657,16 +657,17 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-In general, **you should only mutate objects that you have just created.** If you were inserting a *new* artwork, you could mutate it, but if you're dealing with something that's already in state, you need to make a copy.
+通常来讲，**你应该只改变你刚刚创建的对象**。如果你向数组中插入了一个新的 artwork，你可以修改它，但是如果你想要改变的是 state 中已经存在的东西，你就需要先拷贝一份了。
 
-### Write concise update logic with Immer
+### 使用 Immer 编写简洁的更新逻辑
 
-Updating nested arrays without mutation can get a little bit repetitive. [Just as with objects](/learn/updating-objects-in-state#write-concise-update-logic-with-immer):
+在不产生 mutation 的情况下更新嵌套数可能变得有点重复。[如同对象中一样](/learn/updating-objects-in-state#write-concise-update-logic-with-immer):
 
-- Generally, you shouldn't need to update state more than a couple of levels deep. If your state objects are very deep, you might want to [restructure them differently](/learn/choosing-the-state-structure#avoid-deeply-nested-state) so that they are flat.
-- If you don't want to change your state structure, you might prefer to use [Immer](https://github.com/immerjs/use-immer), which lets you write using the convenient but mutating syntax and takes care of producing the copies for you.
+- 通常情况下，你应该不需要更新处于非常深的层级的 state 。如果你有此类需求，你或许需要[调整一下数据的结构](/learn/choosing-the-state-structure#avoid-deeply-nested-state)，让数据变得扁平一些。
 
-Here is the Art Bucket List example rewritten with Immer:
+- 如果你不想改变 state 中的数据结构，你可以使用 [Immer](https://github.com/immerjs/use-immer) ，它使得你可以继续使用便捷但会产生 mutation 的语法，并帮你自动处理好需要拷贝的地方。
+
+下面是我们用 Immer 来重写的 Art Bucket List 的例子：
 
 <Sandpack>
 
@@ -767,7 +768,7 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-Note how with Immer, **mutation like `artwork.seen = nextSeen` is now okay:**
+请注意当使用了 Immer 时，**类似于 `artwork.seen = nextSeen` 这种会产生 mutation 的语法不会再有任何问题了：**
 
 ```js
 updateMyTodos(draft => {
@@ -776,17 +777,17 @@ updateMyTodos(draft => {
 });
 ```
 
-This is because you're not mutating the _original_ state, but you're mutating a special `draft` object provided by Immer. Similarly, you can apply mutating methods like `push()` and `pop()` to the content of the `draft`.
+这是因为你并没有直接修改*原本的*state ，你修改的是 Immer 为你提供的一个特殊的 `draft` 对象。同样地，你也可以使用 `push()` 和 `pop()` 这些会改变原数组的方法来操作 `draft` 对象。
 
-Behind the scenes, Immer always constructs the next state from scratch according to the changes that you've done to the `draft`. This keeps your event handlers very concise without ever mutating state.
+这背后的原理是，Immer 总是会根据你对 `draft` 的修改来从头重新构建下一个 state 。这可以使得你的事件处理代码更为简洁，同时也不会修改 state 。
 
 <Recap>
 
-- You can put arrays into state, but you can't change them.
-- Instead of mutating an array, create a *new* version of it, and update the state to it.
-- You can use the `[...arr, newItem]` array spread syntax to create arrays with new items.
-- You can use `filter()` and `map()` to create new arrays with filtered or transformed items.
-- You can use Immer to keep your code concise.
+- 你可以把数组放入 state 中，但你不应该直接修改它。
+- 不要直接修改数组，而是创建他的一份*新的*拷贝，然后使用新的数组来更新它的状态。
+- 你可以使用 `[...arr, newItem]` 这样的数组展开语法来向数组中添加元素。
+- 你可以使用 `filter()` 和 `map()` 来创建一个经过过滤或者变换的数组。
+- 你可以使用 Immer 来保持代码的简洁。
 
 </Recap>
 
@@ -794,9 +795,9 @@ Behind the scenes, Immer always constructs the next state from scratch according
 
 <Challenges>
 
-### Update an item in the shopping cart
+### 更新购物车中的商品
 
-Fill in the `handleIncreaseClick` logic so that pressing "+" increases the corresponding number:
+填写 `handleIncreaseClick` 的代码，实现当点击“+”号时数字加一的功能：
 
 <Sandpack>
 
@@ -854,7 +855,7 @@ button { margin: 5px; }
 
 <Solution>
 
-You can use the `map` function to create a new array, and then use the `...` object spread syntax to create a copy of the changed object for the new array:
+你可以使用 `map` 方法来创建一个新的数组，然后使用 `...` 对象展开语法来创建一个修改后的对象并插入到新的数组中：
 
 <Sandpack>
 
@@ -921,9 +922,9 @@ button { margin: 5px; }
 
 </Solution>
 
-### Remove an item from the shopping cart
+### 删除购物车中的商品
 
-This shopping cart has a working "+" button, but the "–" button doesn't do anything. You need to add an event handler to it so that pressing it decreases the `count` of the corresponding product. If you press "–" when the count is 1, the product should automatically get removed from the cart. Make sure it never shows 0.
+现在购物车有了一个可以使用的“+”按钮，但是“-”却没有起到任何作用。你需要给这个按钮添加一个事件处理函数，使得它能够在被点击时可以减少对应商品的 `数量` 。如果在点击按钮前数字是 1 ，那么需要在点击后把商品从购物车中删除掉。确保商品数量不出现 0 。
 
 <Sandpack>
 
@@ -993,7 +994,7 @@ button { margin: 5px; }
 
 <Solution>
 
-You can first use `map` to produce a new array, and then `filter` to remove products with a `count` set to `0`:
+你可以先使用 `map` 方法来创建一个新数组，然后使用 `filter` 方法删除掉 `count` 值为 `0` 的商品
 
 <Sandpack>
 
@@ -1082,9 +1083,9 @@ button { margin: 5px; }
 
 </Solution>
 
-### Fix the mutations using non-mutative methods
+### 使用不会产生 mutation 的方法解决下面的问题
 
-In this example, all of the event handlers in `App.js` use mutation. As a result, editing and deleting todos doesn't work. Rewrite `handleAddTodo`, `handleChangeTodo`, and `handleDeleteTodo` to use the non-mutative methods:
+在下面的例子中，`App.js` 中所有的事件处理函数都会产生 mutation 。这就造成了编辑和删除任意 todo 都没有反应。 你需要通过重写 `handleAddTodo`, `handleChangeTodo`, 和 `handleDeleteTodo` 这三个函数来解决这个问题：
 
 <Sandpack>
 
@@ -1247,7 +1248,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-In `handleAddTodo`, you can use the array spread syntax. In `handleChangeTodo`, you can create a new array with `map`. In `handleDeleteTodo`, you can create a new array with `filter`. Now the list works correctly:
+在 `handleAddTodo` 函数中，你可以使用数组展开语法。在 `handleChangeTodo` 函数中，你可以使用 `map` 方法创建一个新数组。在 `handleDeleteTodo` 函数中，你可以使用 `filter` 方法创建一个新数组。现在列表可以正常工作了：
 
 <Sandpack>
 
@@ -1415,9 +1416,9 @@ ul, li { margin: 0; padding: 0; }
 </Solution>
 
 
-### Fix the mutations using Immer
+### 使用 Immer 修复 mutation 的问题
 
-This is the same example as in the previous challenge. This time, fix the mutations by using Immer. For your convenience, `useImmer` is already imported, so you need to change the `todos` state variable to use it.
+下面的例子和上一个挑战相同。这次，你需要使用 Immer 来解决 mutation 的问题。为了你的方便，`useImmer` 已经被引入了，因此你需要通过改变 `todos` 的 state 来使用它。
 
 <Sandpack>
 
@@ -1599,7 +1600,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-With Immer, you can write code in the mutative fashion, as long as you're only mutating parts of the `draft` that Immer gives you. Here, all mutations are performed on the `draft` so the code works:
+通过使用 Immer ，你可以写出会产生 mutation 的代码，前提是你只修改 Immer 提供给你的那部分 `draft` 。这里所有的 mutation 都是在 `draft` 上操作的，因此代码可以正常运行：
 
 <Sandpack>
 
@@ -1785,9 +1786,9 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-You can also mix and match the mutative and non-mutative approaches with Immer.
+你也可以在 Immer 中将会产生和不会产生 mutation 的方法混合使用。
 
-For example, in this version `handleAddTodo` is implemented by mutating the Immer `draft`, while `handleChangeTodo` and `handleDeleteTodo` use the non-mutative `map` and `filter` methods:
+例如，在下面的代码中，`handleAddTodo`是通过改变 Immer 的 `draft` 来实现的，而 `handleChangeTodo` 和 `handleDeleteTodo` 则使用了不会产生 mutation 的 `map` 和 `filter` 方法：
 
 <Sandpack>
 
@@ -1970,7 +1971,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-With Immer, you can pick the style that feels the most natural for each separate case.
+通过使用 Immer ，你可以选择在不同情况下最为自然的代码风格。
 
 </Solution>
 

From 764624a303e68a8d966bfc99ef1bd69d64e21582 Mon Sep 17 00:00:00 2001
From: zhuye <zhuye256@163.com>
Date: Tue, 7 Dec 2021 22:40:40 +0800
Subject: [PATCH 03/11] fix format

---
 beta/src/pages/learn/updating-arrays-in-state.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/beta/src/pages/learn/updating-arrays-in-state.md b/beta/src/pages/learn/updating-arrays-in-state.md
index 6d1948474b..a674c98114 100644
--- a/beta/src/pages/learn/updating-arrays-in-state.md
+++ b/beta/src/pages/learn/updating-arrays-in-state.md
@@ -89,9 +89,7 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-取而代之的，创建一个*新*数组，新数组包含了原始数组的所有元素并在末尾添加了一个新的元素。这一步的实现有很多种不同的方法，其中最简单的就是使用
-
-Instead, create a *new* array which contains the existing items *and* a new item at the end. There are multiple ways to do this, but the easiest one is to use the `...` [数组展开](a-javascript-refresher#array-spread)语法:
+取而代之的，创建一个*新*数组，新数组包含了原始数组的所有元素并在末尾添加了一个新的元素。这一步的实现有很多种不同的方法，其中最简单的就是使用[数组展开](a-javascript-refresher#array-spread)语法:
 
 ```js
 setArtists( // 使用新数组

From 25a3f933496e7af37934552982c352629c160dad Mon Sep 17 00:00:00 2001
From: zhuye <zhuye256@163.com>
Date: Tue, 7 Dec 2021 22:51:04 +0800
Subject: [PATCH 04/11] fix format

---
 beta/src/pages/learn/updating-arrays-in-state.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/beta/src/pages/learn/updating-arrays-in-state.md b/beta/src/pages/learn/updating-arrays-in-state.md
index a674c98114..489150ef0b 100644
--- a/beta/src/pages/learn/updating-arrays-in-state.md
+++ b/beta/src/pages/learn/updating-arrays-in-state.md
@@ -662,7 +662,6 @@ function ItemList({ artworks, onToggle }) {
 在不产生 mutation 的情况下更新嵌套数可能变得有点重复。[如同对象中一样](/learn/updating-objects-in-state#write-concise-update-logic-with-immer):
 
 - 通常情况下，你应该不需要更新处于非常深的层级的 state 。如果你有此类需求，你或许需要[调整一下数据的结构](/learn/choosing-the-state-structure#avoid-deeply-nested-state)，让数据变得扁平一些。
-
 - 如果你不想改变 state 中的数据结构，你可以使用 [Immer](https://github.com/immerjs/use-immer) ，它使得你可以继续使用便捷但会产生 mutation 的语法，并帮你自动处理好需要拷贝的地方。
 
 下面是我们用 Immer 来重写的 Art Bucket List 的例子：

From fb67f78f60092090c4d1b35fae562b89556a859d Mon Sep 17 00:00:00 2001
From: zhuye <zhuye256@163.com>
Date: Fri, 10 Dec 2021 00:50:49 +0800
Subject: [PATCH 05/11] fix a few translation

---
 beta/src/pages/learn/updating-arrays-in-state.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/beta/src/pages/learn/updating-arrays-in-state.md b/beta/src/pages/learn/updating-arrays-in-state.md
index db68afff22..21e3994bec 100644
--- a/beta/src/pages/learn/updating-arrays-in-state.md
+++ b/beta/src/pages/learn/updating-arrays-in-state.md
@@ -148,7 +148,7 @@ button { margin-left: 5px; }
 ```js
 setArtists([
   { id: nextId++, name: name },
-  ...artists // 将原数组中的元素放在后面
+  ...artists // 将原数组中的元素放在末尾
 ]);
 ```
 
@@ -357,7 +357,7 @@ export default function List() {
   );
 
   function handleClick() {
-    const insertAt = 1; // Could be any index
+    const insertAt = 1; // 可能是任何一个位置
     const nextArtists = [
       // 在插入位置之前的元素:
       ...artists.slice(0, insertAt),
@@ -547,7 +547,7 @@ function ItemList({ artworks, onToggle }) {
 ```js
 const myNextList = [...myList];
 const artwork = myNextList.find(a => a.id === artworkId);
-artwork.seen = nextSeen; // 问题在于: mutates an existing item
+artwork.seen = nextSeen; // 问题在于: 直接改变了已有的元素
 setMyList(myNextList);
 ```
 

From a39c78cbd7755a6d54651e8859c56726bb8fbf8e Mon Sep 17 00:00:00 2001
From: Zhu Ye <38151581+yliaz@users.noreply.github.com>
Date: Tue, 21 Dec 2021 20:12:55 +0800
Subject: [PATCH 06/11] Apply suggestions from code review

Co-authored-by: takeItIzzy <48763672+takeItIzzy@users.noreply.github.com>
---
 .../pages/learn/updating-arrays-in-state.md   | 146 +++++++++---------
 1 file changed, 73 insertions(+), 73 deletions(-)

diff --git a/beta/src/pages/learn/updating-arrays-in-state.md b/beta/src/pages/learn/updating-arrays-in-state.md
index 21e3994bec..a34b7eaa34 100644
--- a/beta/src/pages/learn/updating-arrays-in-state.md
+++ b/beta/src/pages/learn/updating-arrays-in-state.md
@@ -4,49 +4,49 @@ title: 修改 State 中的数组
 
 <Intro>
 
-数组是另外一种可以存储在 state 中的 JavaScript 对象，它虽然是可变的，但是却应该被视为不可变的。同对象一样，当你想要更新 state 中的数组的时候，你需要创建一个新的数组（或者将已有的数组复制成一个新的数组），并将这个新数组设置到 state 上。
+数组是另外一种可以存储在 state 中的 JavaScript 对象，它虽然是可变的，但是却应该被视为不可变。同对象一样，当你想要更新存储于 state 中的数组时，你需要创建一个新的数组（或者创建一份已有数组的拷贝值），并使用新数组设置 state。
 
 </Intro>
 
 <YouWillLearn>
 
-- 如何添加、删除或者修改 React state 中的数组中某个元素的值
-- 如何更新数组中某个类型为对象的元素
-- 如何使用 Immer 来降低数组重复复制的次数
+- 如何添加、删除或者修改 React state 中的数组中的元素
+- 如何更新数组内部的对象
+- 如何通过 Immer 降低数组拷贝的重复度
 
 </YouWillLearn>
 
-## 不使用 mutation 的情况下更新数组 {/*updating-arrays-without-mutation*/}
+## 在没有 mutation 的前提下更新数组 {/*updating-arrays-without-mutation*/}
 
-在 JavaScript 中，数组就是对象的一种. [同对象一样](/learn/updating-objects-in-state), **你需要将 React state 中的数组视为只读的**。这意味着你不应该使用类似于 `arr[0] = 'bird'` 这样的方式来修改数组中的某个元素，你也不应该使用会改变原始数组的方法，例如 `push()` 和 `pop()`。
+在 JavaScript 中，数组只是另一种对象。[同对象一样](/learn/updating-objects-in-state)，**你需要将 React state 中的数组视为只读的**。这意味着你不应该使用类似于 `arr[0] = 'bird'` 这样的方式来重新分配数组中的元素，也不应该使用会直接修改原始数组的方法，例如 `push()` 和 `pop()`。
 
-取而代之的，每次你想要更新一个数组时，你需要把一个*新*的数组传入 state 的 setting 方法中。为了实现这一点，你可以通过使用一些不会改变原始数组的方法，例如 `filter()` 和 `map()` ，从原始数组创建一个新的数组。之后你就可以把这个新创建的数组设置到 state 上。
+相反，每次要更新一个数组时，你需要把一个*新*的数组传入 state 的 setting 方法中。为此，你可以通过使用像 `filter()` 和 `map()` 这样不会直接修改原始值的方法，从原始数组生成一个新的数组。然后你就可以将 state 设置为这个新生成的数组。
 
-这里是数组相关操作的一张参考表。当你对 React state 中的数组进行操作时，你需要避免使用表格左侧的方法，而尽量使用表格右侧的方法：
+下面是常见数组操作的参考表。当你操作 React state 中的数组时，你需要避免使用左列的方法，而首选右列的方法：
 
 |         | 避免使用 (会改变原始数组) | 推荐使用 (会返回一个新数组） |
 |---------|----------------|-------------------|
-| 添加元素 | `push` ， `unshift` | `concat` ， `[...arr]` 展开语法 （[例子](#adding-to-an-array)）|
-| 删除元素 | `pop` ， `shift` ， `splice` | `filter` ， `slice` （[例子](#removing-from-an-array)）
-| 替换元素 | `splice` ， `arr[i] = ...` 赋值 | `map` （[例子](#replacing-items-in-an-array)） |
-| 排序 | `reverse` ， `sort` | 先将数组复制一份 （[例子](#making-other-changes-to-an-array)） |
+| 添加元素 | `push`，`unshift` | `concat`，`[...arr]` 展开语法（[例子](#adding-to-an-array)）|
+| 删除元素 | `pop`，`shift`，`splice` | `filter`，`slice`（[例子](#removing-from-an-array)）
+| 替换元素 | `splice`，`arr[i] = ...` 赋值 | `map`（[例子](#replacing-items-in-an-array)） |
+| 排序 | `reverse`，`sort` | 先将数组复制一份（[例子](#making-other-changes-to-an-array)） |
 
 或者，你可以[使用 Immer](#write-concise-update-logic-with-immer) ，这样你便可以使用表格中的所有方法了。
 
 <Gotcha>
 
-不幸的是，[`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 和 [`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 虽然名字相似，但是却迥然不同：
+不幸的是，虽然 [`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 和 [`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 的名字相似，但作用却迥然不同：
 
-* `slice` 使得你可以复制数组或者它的子数组。
-* `splice` **会改变** 原始数组（插入或者删除元素）。
+* `slice` 让你可以拷贝数组或是数组的一部分。
+* `splice` **会直接修改** 原始数组（插入或者删除元素）。
 
-在 React 中，更多情况下你会使用 `slice` （没有 `p` ！），因为你不想改变 state 中的对象或数组。[更新对象](/learn/updating-objects-in-state)这一章节解释了什么是 mutation 以及为什么不推荐在 state 里使用它。
+在 React 中，更多情况下你会使用 `slice`（没有 `p` ！），因为你不想改变 state 中的对象或数组。[更新对象](/learn/updating-objects-in-state)这一章节解释了什么是 mutation，以及为什么不推荐在 state 里这样做。
 
 </Gotcha>
 
 ### 向数组中添加元素 {/*adding-to-an-array*/}
 
-`push()` 会改变原始数组，你应该避免使用它：
+`push()` 会直接修改原始数组，这是你所不希望的：
 
 <Sandpack>
 
@@ -89,11 +89,11 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-取而代之的，创建一个*新*数组，新数组包含了原始数组的所有元素并在末尾添加了一个新的元素。这一步的实现有很多种不同的方法，其中最简单的就是使用[数组展开](a-javascript-refresher#array-spread)语法:
+相反，你应该创建一个*新*数组，其包含了原始数组的所有元素*以及*一个在末尾的新元素。这可以通过很多种方法实现，最简单的一种就是使用 `...` [数组展开](a-javascript-refresher#array-spread) 语法：
 
 ```js
-setArtists( // 使用新数组
-  [ // 替代原数组
+setArtists( // 替换 state
+  [ // 是通过传入一个新数组实现的
     ...artists, // 新数组包含原数组的所有元素
     { id: nextId++, name: name } // 并在末尾添加了一个新的元素
   ]
@@ -143,7 +143,7 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-使用数组展开运算符，也可以做到把新添加的元素放在原数组 `...artists` 的前面：
+数组展开运算符还允许你把新添加的元素放在原始的 `...artists` 之前：
 
 ```js
 setArtists([
@@ -152,11 +152,11 @@ setArtists([
 ]);
 ```
 
-这样一来，展开操作既可以实现类似于 `push()` 的操作，将新元素添加到原数组的末尾，也可以实现类似于 `unshift()` 的操作，将新元素插入到原数组开头。你可以在下面的 sandbox 中尝试一下！
+这样一来，展开操作就可以完成 `push()` 和 `unshift()` 的工作，将新元素添加到数组的末尾和开头。你可以在下面的 sandbox 中尝试一下！
 
 ### 从数组中删除元素 {/*removing-from-an-array*/}
 
-从数组中删除一个元素最简单的方法就是将它*过滤出去*。换句话说，你需要创建一个不包含这个元素的新数组。为了实现这一点，可以使用 `filter` 方法，例如：
+从数组中删除一个元素最简单的方法就是将它*过滤出去*。换句话说，你需要生成一个不包含该元素的新数组。这可以通过 `filter` 方法实现，例如：
 
 <Sandpack>
 
@@ -200,7 +200,7 @@ export default function List() {
 
 </Sandpack>
 
-点击几次“删除”按钮，再查看一下处理点击事件的代码。
+点击“删除”按钮几次，并且查看按钮处理点击事件的代码。
 
 ```js
 setArtists(
@@ -208,13 +208,13 @@ setArtists(
 );
 ```
 
-在这里，`artists.filter(s => s.id !== artist.id)` 这段代码表示 “创建一个新的数组，数组中的 `artists` 的id不同于 `artist.id` ”。换句话说，每个 artist 的“删除”按钮会把这位 artist 从原始数组中过滤掉，并使用新生成的数组再次进行渲染。值得注意的是，`filter` 不会改变原始数组。
+这里，`artists.filter(s => s.id !== artist.id)` 表示 “创建一个新的数组，该数组由那些 ID 与 `artists.id` 不同的 `artists` 组成”。换句话说，每个 artist 的“删除”按钮会把_那一个_ artist 从原始数组中过滤掉，并使用过滤后的数组再次进行渲染。注意，`filter` 并不会改变原始数组。
 
-### 变换一个数组 {/*transforming-an-array*/}
+### 转换数组 {/*transforming-an-array*/}
 
-如果你想改变数组中的某些或全部元素，你可以使用 `map()` 方法来创建一个新数组。你传入 `map` 方法的函数可以决定该如何依照每个元素的数组和索引对他们进行处理。
+如果你想改变数组中的某些或全部元素，你可以用 `map()` 创建一个**新**数组。你传入 `map` 的函数决定了要根据每个元素的值或索引（或二者都要）对元素做何处理。
 
-在下面的例子中，数组中存储了两个圆形和一个正方形的坐标，当你点击按钮时，会将所有的原型向下移动100个像素的长度。这是通过使用 `map()` 方法创建一个新数组来实现的。
+在下面的例子中，数组中记录了两个圆形和一个正方形的坐标。当你点击按钮时，仅有两个圆形会向下移动 100 像素。这是通过使用 `map()` 生成一个新数组实现的。
 
 <Sandpack>
 
@@ -282,7 +282,7 @@ body { height: 300px; }
 
 替换数组中一个或多个元素是非常常见的操作。类似 `arr[0] = 'bird'` 这样的赋值语句会改变原始数组，所以这种情况下，你也应该考虑使用 `map` 方法。
 
-想要替换一个元素，需要使用 `map` 方法创建一个新数组。在传入 `map` 方法的函数里，第二个参数是元素的索引。使用索引来判断最终是返回当前元素还是替换成其他的东西：
+要替换一个元素，请使用 `map` 创建一个新数组。在你的 `map` 回调里，第二个参数是元素的索引。使用索引来判断最终是返回原始的元素（即回调的第一个参数）还是替换成其他值：
 
 <Sandpack>
 
@@ -301,7 +301,7 @@ export default function CounterList() {
   function handleIncrementClick(index) {
     const nextCounters = counters.map((c, i) => {
       if (i === index) {
-        // 计数器数字加一
+        // 点击计数器递增
         return c + 1;
       } else {
         // 其余部分不发生变化
@@ -334,9 +334,9 @@ button { margin: 5px; }
 
 ### 向数组中插入元素 {/*inserting-into-an-array*/}
 
-有时，你需要向数组中特定位置插入一个元素，这个位置既不是数组开头，也不是数组的末尾。为了实现这个操作，你可以将数组展开运算符 `...` 和 `slice()` 方法结合起来使用。`slice()` 方法使得你可以从数组中取出一部分。为了将元素插入数组，你需要三个部分，第一部分是原数组在插入点之前的部分，第二部分是要插入的元素，第三部分是原数组在插入点之后的部分，将这三部分结合起来就构成了我们需要的最终数组。
+有时，你也许想向数组特定位置插入一个元素，这个位置既不在数组开头，也不在末尾。为此，你可以将数组展开运算符 `...` 和 `slice()` 方法一起使用。`slice()` 方法让你从数组中切出“一片”。为了将元素插入数组，你需要先展开原数组在插入点之前的切片，然后插入新元素，最后展开原数组中剩下的部分。
 
-下面的例子中，插入按钮总是会将元素插入到数组中索引为 `1` 的地方。
+下面的例子中，插入按钮总是会将元素插入到数组中索引为 `1` 的位置。
 
 <Sandpack>
 
@@ -357,13 +357,13 @@ export default function List() {
   );
 
   function handleClick() {
-    const insertAt = 1; // 可能是任何一个位置
+    const insertAt = 1; // 可能是任何索引
     const nextArtists = [
-      // 在插入位置之前的元素:
+      // 插入点之前的元素:
       ...artists.slice(0, insertAt),
       // 新的元素:
       { id: nextId++, name: name },
-      // 在插入位置之后的元素:
+      // 插入点之后的元素:
       ...artists.slice(insertAt)
     ];
     setArtists(nextArtists);
@@ -398,7 +398,7 @@ button { margin-left: 5px; }
 
 ### 其他改变数组的情况 {/*making-other-changes-to-an-array*/}
 
-有些时候，你无法仅仅依靠扩展运算符和 `map()` 或者 `filter()` 等不会改变原数组的方法来达到想要的结果。例如，你可能想实现反转数组的操作。而 JavaScript 中的 `reverse()` 和 `sort()` 方法会改变原数组，所以你不能直接地使用他们。
+总会有一些事，是你仅仅依靠展开运算符和 `map()` 或者 `filter()` 等不会直接修改原值的方法所无法做到的。例如，你可能想翻转数组，或是对数组排序。而 JavaScript 中的 `reverse()` 和 `sort()` 方法会改变原数组，所以你无法直接使用它们。
 
 **但是，你可以先将数组复制一份，再执行对应的操作。**
 
@@ -428,7 +428,7 @@ export default function List() {
   return (
     <>
       <button onClick={handleClick}>
-        反转
+        翻转
       </button>
       <ul>
         {list.map(artwork => (
@@ -442,27 +442,27 @@ export default function List() {
 
 </Sandpack>
 
-在这段代码中，你先使用 `[...list]` 扩展运算符创建了数组的一份拷贝。当你创建了一个新数组之后，便可以对新的数组实行 `nextList.reverse()` 或 `nextList.sort()` 的操作。你甚至还可以直接使用 `nextList[0] = "something"` 对数组中某个元素进行赋值。
+在这段代码中，你先使用 `[...list]` 展开运算符创建了一份数组的拷贝值。当你有了这个拷贝值后，你就可以使用像 `nextList.reverse()` 或 `nextList.sort()` 这样直接修改原数组的方法。你甚至可以通过 `nextList[0] = "something"` 这样的方式对数组中的特定元素进行赋值。
 
-然而，即便你将数组拷贝了一份，你还是不能直接改变其中的元素。这是因为数组的拷贝是浅拷贝，新的数组中也包含了原数组中的元素。因此，如果你修改了拷贝后数组中某个类型为对象的元素，也会改变当前的 state 。例如，下面的代码会造成一些问题。
+然而，**即使你拷贝了数组，你还是不能直接修改其_内部_的元素**。这是因为数组的拷贝是浅拷贝——新的数组中依然保留了与原始数组相同的元素。因此，如果你修改了拷贝数组内部的某个对象，其实你正在直接修改当前的 state 。举个例子，像下面的代码就会带来问题。
 
 ```js
 const nextList = [...list];
-nextList[0].seen = true; // 问题所在：会改变 list[0] 的值
+nextList[0].seen = true; // 问题：改变了 list[0] 的值
 setList(nextList);
 ```
 
-虽然 `nextList` 和 `list` 是两个不同的数组，**`nextList[0]` 和 `list[0]` 却指向了同一个对象**。因此，当你修改 `nextList[0].seen` 的时候，也会改变 `list[0].seen` 的值。这就是 state mutation ，你应该避免这种操作！你可以用[更新嵌套的 JavaScript 对象](docs/updating-objects-in-state#updating-a-nested-object)中提到的方法来解决这个问题，方法就是将你想要修改的那个元素拷贝一份出来，并进行修改。下面是具体的操作。
+虽然 `nextList` 和 `list` 是两个不同的数组，**`nextList[0]` 和 `list[0]` 却指向了同一个对象**。因此，通过改变 `nextList[0].seen`，`list[0].seen` 的值也被改变了。这是一种 state 的 mutation 操作，你应该避免这么做！你可以用类似于 [更新嵌套的 JavaScript 对象](docs/updating-objects-in-state#updating-a-nested-object) 的方式解决这个问题——拷贝想要修改的特定元素，而不是直接修改它。下面是具体的操作。
 
-## 更新数组中的对象 {/*updating-objects-inside-arrays*/}
+## 更新数组内部的对象 {/*updating-objects-inside-arrays*/}
 
-对象并不是_真的_包含在数组中。他们在代码层面看起来是在数组中，但是数组中的每个对象都有着额外的值，数组中的元素只是指向了这个值。这就是当你在处理类似于 `list[0]` 这样的嵌套字段时需要格外注意的原因。两个数组中的不同元素可能指向了同一个对象！
+对象并不是_真的_位于数组“内部”。可能他们在代码中看起来像是在数组“内部”，但其实数组中的每个对象都是这个数组“指向”的一个存储于其它位置的值。这就是当你在处理类似 `list[0]` 这样的嵌套字段时需要格外小心的原因。其他人的艺术品清单可能指向了数组的同一个元素！
 
 <!-- TODOODLE -->
 
 **当你更新一个嵌套的 state 时，你需要从需要更新的地方开始自底向上创建一份完整的拷贝。** 让我们看一下具体是怎么操作的。
 
-在下面的例子中，两个不同的艺术品列表有着相同的初始 state 。他们本应该互不影响，但是因为 mutation 的存在，他们共享了同一个 state ，改变其中的一个对象的某个属性，也会影响另外一个对象：
+在下面的例子中，两个不同的艺术品清单有着相同的初始 state。他们本应该互不影响，但是因为一次 mutation，他们的 state 被意外地共享了，勾选一个清单中的事项会影响另外一个清单：
 
 <Sandpack>
 
@@ -547,29 +547,29 @@ function ItemList({ artworks, onToggle }) {
 ```js
 const myNextList = [...myList];
 const artwork = myNextList.find(a => a.id === artworkId);
-artwork.seen = nextSeen; // 问题在于: 直接改变了已有的元素
+artwork.seen = nextSeen; // 问题：直接修改了已有的元素
 setMyList(myNextList);
 ```
 
-虽然 `myNextList` 这个数组是新创建的，但是其*内部的元素*与原数组 `myList` 是相同的。因此，当修改 `artwork.seen` 的值时，也会改变原数组中对应的 artwork 对象。而 `yourArtworks` 中指向的也是同一个 artwork 对象，这样就会带来问题。这样的问题有时很难被察觉到，但庆幸的是，如果你避免改变 state，它们就会消失。
+虽然 `myNextList` 这个数组是新的，但是其*内部的元素本身*与原数组 `myList` 是相同的。因此，修改 `artwork.seen`，其实是在修改*原始的* artwork 对象。而这个 artwork 对象也被 `yourArtworks` 使用，这样就带来了 bug。这样的 bug 可能难以想到，但好在如果你避免直接修改 state，它们就会消失。
 
-**你可以使用 `map` 方法在不触及 mutation 的情况下将一个旧的元素替换成新的值**
+**你可以使用 `map` 在没有 mutation 的前提下将一个旧的元素替换成更新的版本。**
 
 ```js
 setMyList(myList.map(artwork => {
   if (artwork.id === artworkId) {
-    // 创建一个全新的对象
+    // 创建包含变更的*新*对象
     return { ...artwork, seen: nextSeen };
   } else {
-    // 不做任何改变
+    // 没有变更
     return artwork;
   }
 });
 ```
 
-此处的 `...` 是一个对象展开语法，用来[创建一个对象的拷贝](/learn/updating-objects-in-state#copying-objects-with-the-spread-syntax).
+此处的 `...` 是一个对象展开语法，被用来[创建一个对象的拷贝](/learn/updating-objects-in-state#copying-objects-with-the-spread-syntax).
 
-通过这种方式，没有任何现有的 state 中的元素会被改变，也就不会再产生任何问题了。
+通过这种方式，没有任何现有的 state 中的元素会被改变，bug 也就被修复了。
 
 <Sandpack>
 
@@ -592,10 +592,10 @@ export default function BucketList() {
   function handleToggleMyList(artworkId, nextSeen) {
     setMyList(myList.map(artwork => {
       if (artwork.id === artworkId) {
-        // 创建一个全新的对象
+        // 创建包含变更的*新*对象
         return { ...artwork, seen: nextSeen };
       } else {
-        // 不做任何改变
+        // 没有变更
         return artwork;
       }
     }));
@@ -604,10 +604,10 @@ export default function BucketList() {
   function handleToggleYourList(artworkId, nextSeen) {
     setYourList(yourList.map(artwork => {
       if (artwork.id === artworkId) {
-        // 创建一个全新的对象
+        // 创建包含变更的*新*对象
         return { ...artwork, seen: nextSeen };
       } else {
-        // 不做任何改变
+        // 没有变更
         return artwork;
       }
     }));
@@ -655,14 +655,14 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-通常来讲，**你应该只改变你刚刚创建的对象**。如果你向数组中插入了一个新的 artwork，你可以修改它，但是如果你想要改变的是 state 中已经存在的东西，你就需要先拷贝一份了。
+通常来讲，**你应该只直接修改你刚刚创建的对象**。如果你在插入一个*新*的 artwork，你可以修改它，但是如果你想要改变的是 state 中已经存在的东西，你就需要先拷贝一份了。
 
 ### 使用 Immer 编写简洁的更新逻辑 {/*write-concise-update-logic-with-immer*/}
 
-在不产生 mutation 的情况下更新嵌套数可能变得有点重复。[如同对象中一样](/learn/updating-objects-in-state#write-concise-update-logic-with-immer):
+在没有 mutation 的前提下更新嵌套数组可能会变得有点重复。[就像对对象一样](/learn/updating-objects-in-state#write-concise-update-logic-with-immer):
 
 - 通常情况下，你应该不需要更新处于非常深的层级的 state 。如果你有此类需求，你或许需要[调整一下数据的结构](/learn/choosing-the-state-structure#avoid-deeply-nested-state)，让数据变得扁平一些。
-- 如果你不想改变 state 中的数据结构，你可以使用 [Immer](https://github.com/immerjs/use-immer) ，它使得你可以继续使用便捷但会产生 mutation 的语法，并帮你自动处理好需要拷贝的地方。
+- 如果你不想改变 state 中的数据结构，你也许会更喜欢使用 [Immer](https://github.com/immerjs/use-immer) ，它让你可以继续使用方便的，但会直接修改原值的语法，并负责为你生成拷贝值。
 
 下面是我们用 Immer 来重写的 Art Bucket List 的例子：
 
@@ -765,7 +765,7 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-请注意当使用了 Immer 时，**类似于 `artwork.seen = nextSeen` 这种会产生 mutation 的语法不会再有任何问题了：**
+请注意当使用 Immer 时，**类似 `artwork.seen = nextSeen` 这种会产生 mutation 的语法不会再有任何问题了：**
 
 ```js
 updateMyTodos(draft => {
@@ -774,17 +774,17 @@ updateMyTodos(draft => {
 });
 ```
 
-这是因为你并没有直接修改*原本的*state ，你修改的是 Immer 为你提供的一个特殊的 `draft` 对象。同样地，你也可以使用 `push()` 和 `pop()` 这些会改变原数组的方法来操作 `draft` 对象。
+这是因为你并不是在直接修改_原始的_ state ，而是在修改 Immer 提供的一个特殊的 `draft` 对象。同理，你也可以为 `draft` 的内容使用 `push()` 和 `pop()` 这些会直接修改原值的方法。
 
-这背后的原理是，Immer 总是会根据你对 `draft` 的修改来从头重新构建下一个 state 。这可以使得你的事件处理代码更为简洁，同时也不会修改 state 。
+在幕后，Immer 总是会根据你对 `draft` 的修改来从头开始构建下一个 state。这使得你的事件处理程序非常的简洁，同时也不会直接修改 state。
 
 <Recap>
 
 - 你可以把数组放入 state 中，但你不应该直接修改它。
-- 不要直接修改数组，而是创建他的一份*新的*拷贝，然后使用新的数组来更新它的状态。
+- 不要直接修改数组，而是创建它的一份*新的*拷贝，然后使用新的数组来更新它的状态。
 - 你可以使用 `[...arr, newItem]` 这样的数组展开语法来向数组中添加元素。
 - 你可以使用 `filter()` 和 `map()` 来创建一个经过过滤或者变换的数组。
-- 你可以使用 Immer 来保持代码的简洁。
+- 你可以使用 Immer 来保持代码简洁。
 
 </Recap>
 
@@ -794,7 +794,7 @@ updateMyTodos(draft => {
 
 ### 更新购物车中的商品 {/*update-an-item-in-the-shopping-cart*/}
 
-填写 `handleIncreaseClick` 的代码，实现当点击“+”号时数字加一的功能：
+填入 `handleIncreaseClick` 的逻辑，以便按下“+”时对应数字递增：
 
 <Sandpack>
 
@@ -852,7 +852,7 @@ button { margin: 5px; }
 
 <Solution>
 
-你可以使用 `map` 方法来创建一个新的数组，然后使用 `...` 对象展开语法来创建一个修改后的对象并插入到新的数组中：
+你可以使用 `map` 函数创建一个新数组，然后使用 `...` 对象展开语法为新数组创建一个变更后对象的拷贝值：
 
 <Sandpack>
 
@@ -921,7 +921,7 @@ button { margin: 5px; }
 
 ### 删除购物车中的商品 {/*remove-an-item-from-the-shopping-cart*/}
 
-现在购物车有了一个可以使用的“+”按钮，但是“-”却没有起到任何作用。你需要给这个按钮添加一个事件处理函数，使得它能够在被点击时可以减少对应商品的 `数量` 。如果在点击按钮前数字是 1 ，那么需要在点击后把商品从购物车中删除掉。确保商品数量不出现 0 。
+现在购物车有了一个正常工作的“+”按钮，但是“-”按钮却没有任何作用。你需要为它添加一个事件处理程序，以便按下它时可以减少对应商品的 `count`。如果在数字为 1 时按下按钮，商品需要自动从购物车中移除。确保商品计数永远不出现 0。
 
 <Sandpack>
 
@@ -991,7 +991,7 @@ button { margin: 5px; }
 
 <Solution>
 
-你可以先使用 `map` 方法来创建一个新数组，然后使用 `filter` 方法删除掉 `count` 值为 `0` 的商品
+你可以先使用 `map` 生成一个新数组，然后使用 `filter` 移除 `count` 被设置为 `0` 的商品：
 
 <Sandpack>
 
@@ -1080,7 +1080,7 @@ button { margin: 5px; }
 
 </Solution>
 
-### 使用不会产生 mutation 的方法解决下面的问题 {/*fix-the-mutations-using-non-mutative-methods*/}
+### 使用不会直接修改原始值的方法修复 mutation 的问题 {/*fix-the-mutations-using-non-mutative-methods*/}
 
 在下面的例子中，`App.js` 中所有的事件处理函数都会产生 mutation 。这就造成了编辑和删除任意 todo 都没有反应。 你需要通过重写 `handleAddTodo`, `handleChangeTodo`, 和 `handleDeleteTodo` 这三个函数来解决这个问题：
 
@@ -1245,7 +1245,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-在 `handleAddTodo` 函数中，你可以使用数组展开语法。在 `handleChangeTodo` 函数中，你可以使用 `map` 方法创建一个新数组。在 `handleDeleteTodo` 函数中，你可以使用 `filter` 方法创建一个新数组。现在列表可以正常工作了：
+在 `handleAddTodo` 中，你可以使用数组展开语法。在 `handleChangeTodo` 中，你可以使用 `map` 创建一个新数组。在 `handleDeleteTodo` 中，你可以使用 `filter` 创建一个新数组。现在列表可以正常工作了：
 
 <Sandpack>
 
@@ -1415,7 +1415,7 @@ ul, li { margin: 0; padding: 0; }
 
 ### 使用 Immer 修复 mutation 的问题 {/*fix-the-mutations-using-immer*/}
 
-下面的例子和上一个挑战相同。这次，你需要使用 Immer 来解决 mutation 的问题。为了你的方便，`useImmer` 已经被引入了，因此你需要通过改变 `todos` 的 state 来使用它。
+下面的例子和上一个挑战的相同。这次，你需要使用 Immer 来修复 mutation 的问题。为了你的方便，`useImmer` 已经被引入了，你需要使用它来替换 `todos` 的 state 变量。
 
 <Sandpack>
 
@@ -1597,7 +1597,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-通过使用 Immer ，你可以写出会产生 mutation 的代码，前提是你只修改 Immer 提供给你的那部分 `draft` 。这里所有的 mutation 都是在 `draft` 上操作的，因此代码可以正常运行：
+通过使用 Immer，只要你仅仅直接修改 Immer 提供给你的 `draft` 的一部分，你就可以以 mutation 的方式写代码。这里所有的 mutation 都在 `draft` 上执行，因此代码可以正常运行：
 
 <Sandpack>
 
@@ -1785,7 +1785,7 @@ ul, li { margin: 0; padding: 0; }
 
 你也可以在 Immer 中将会产生和不会产生 mutation 的方法混合使用。
 
-例如，在下面的代码中，`handleAddTodo`是通过改变 Immer 的 `draft` 来实现的，而 `handleChangeTodo` 和 `handleDeleteTodo` 则使用了不会产生 mutation 的 `map` 和 `filter` 方法：
+例如，在下面的代码中，`handleAddTodo`是通过直接修改 Immer 的 `draft` 实现的，而 `handleChangeTodo` 和 `handleDeleteTodo` 则使用了不会直接修改原始值的 `map` 和 `filter` 方法：
 
 <Sandpack>
 
@@ -1968,7 +1968,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-通过使用 Immer ，你可以选择在不同情况下最为自然的代码风格。
+通过使用 Immer ，你可以为每个单独的场景选择最为自然的代码风格。
 
 </Solution>
 

From 0c1b6fb19d4c11986d82ab8bba80107e4bc9f832 Mon Sep 17 00:00:00 2001
From: zhuye <zhuye256@163.com>
Date: Tue, 21 Dec 2021 20:46:58 +0800
Subject: [PATCH 07/11] fix unfinished translations

---
 .../pages/learn/updating-arrays-in-state.md   | 60 +++++++++----------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/beta/src/pages/learn/updating-arrays-in-state.md b/beta/src/pages/learn/updating-arrays-in-state.md
index a34b7eaa34..462f0475af 100644
--- a/beta/src/pages/learn/updating-arrays-in-state.md
+++ b/beta/src/pages/learn/updating-arrays-in-state.md
@@ -372,7 +372,7 @@ export default function List() {
 
   return (
     <>
-      <h1>Inspiring sculptors:</h1>
+      <h1>振奋人心的雕塑家们：</h1>
       <input
         value={name}
         onChange={e => setName(e.target.value)}
@@ -502,12 +502,12 @@ export default function BucketList() {
 
   return (
     <>
-      <h1>Art Bucket List</h1>
-      <h2>My list of art to see:</h2>
+      <h1>艺术愿望清单</h1>
+      <h2>我想看的艺术清单：</h2>
       <ItemList
         artworks={myList}
         onToggle={handleToggleMyList} />
-      <h2>Your list of art to see:</h2>
+      <h2>你想看的艺术清单：</h2>
       <ItemList
         artworks={yourList}
         onToggle={handleToggleYourList} />
@@ -615,12 +615,12 @@ export default function BucketList() {
 
   return (
     <>
-      <h1>Art Bucket List</h1>
-      <h2>My list of art to see:</h2>
+      <h1>艺术愿望清单</h1>
+      <h2>我想看的艺术清单：</h2>
       <ItemList
         artworks={myList}
         onToggle={handleToggleMyList} />
-      <h2>Your list of art to see:</h2>
+      <h2>你想看的艺术清单：</h2>
       <ItemList
         artworks={yourList}
         onToggle={handleToggleYourList} />
@@ -707,12 +707,12 @@ export default function BucketList() {
 
   return (
     <>
-      <h1>Art Bucket List</h1>
-      <h2>My list of art to see:</h2>
+      <h1>艺术愿望清单</h1>
+      <h2>我想看的艺术清单：</h2>
       <ItemList
         artworks={myList}
         onToggle={handleToggleMyList} />
-      <h2>Your list of art to see:</h2>
+      <h2>你想看的艺术清单：</h2>
       <ItemList
         artworks={yourArtworks}
         onToggle={handleToggleYourList} />
@@ -1156,7 +1156,7 @@ export default function AddTodo({ onAddTodo }) {
       <button onClick={() => {
         setTitle('');
         onAddTodo(title);
-      }}>Add</button>
+      }}>添加</button>
     </>
   )
 }
@@ -1200,7 +1200,7 @@ function Task({ todo, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          保存
         </button>
       </>
     );
@@ -1209,7 +1209,7 @@ function Task({ todo, onChange, onDelete }) {
       <>
         {todo.title}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          编辑
         </button>
       </>
     );
@@ -1228,7 +1228,7 @@ function Task({ todo, onChange, onDelete }) {
       />
       {todoContent}
       <button onClick={() => onDelete(todo.id)}>
-        Delete
+        删除
       </button>
     </label>
   );
@@ -1323,7 +1323,7 @@ export default function AddTodo({ onAddTodo }) {
       <button onClick={() => {
         setTitle('');
         onAddTodo(title);
-      }}>Add</button>
+      }}>添加</button>
     </>
   )
 }
@@ -1367,7 +1367,7 @@ function Task({ todo, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          保存
         </button>
       </>
     );
@@ -1376,7 +1376,7 @@ function Task({ todo, onChange, onDelete }) {
       <>
         {todo.title}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          编辑
         </button>
       </>
     );
@@ -1395,7 +1395,7 @@ function Task({ todo, onChange, onDelete }) {
       />
       {todoContent}
       <button onClick={() => onDelete(todo.id)}>
-        Delete
+        删除
       </button>
     </label>
   );
@@ -1490,7 +1490,7 @@ export default function AddTodo({ onAddTodo }) {
       <button onClick={() => {
         setTitle('');
         onAddTodo(title);
-      }}>Add</button>
+      }}>添加</button>
     </>
   )
 }
@@ -1534,7 +1534,7 @@ function Task({ todo, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          保存
         </button>
       </>
     );
@@ -1543,7 +1543,7 @@ function Task({ todo, onChange, onDelete }) {
       <>
         {todo.title}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          编辑
         </button>
       </>
     );
@@ -1562,7 +1562,7 @@ function Task({ todo, onChange, onDelete }) {
       />
       {todoContent}
       <button onClick={() => onDelete(todo.id)}>
-        Delete
+        删除
       </button>
     </label>
   );
@@ -1678,7 +1678,7 @@ export default function AddTodo({ onAddTodo }) {
       <button onClick={() => {
         setTitle('');
         onAddTodo(title);
-      }}>Add</button>
+      }}>添加</button>
     </>
   )
 }
@@ -1722,7 +1722,7 @@ function Task({ todo, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          保存
         </button>
       </>
     );
@@ -1731,7 +1731,7 @@ function Task({ todo, onChange, onDelete }) {
       <>
         {todo.title}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          编辑
         </button>
       </>
     );
@@ -1750,7 +1750,7 @@ function Task({ todo, onChange, onDelete }) {
       />
       {todoContent}
       <button onClick={() => onDelete(todo.id)}>
-        Delete
+        删除
       </button>
     </label>
   );
@@ -1863,7 +1863,7 @@ export default function AddTodo({ onAddTodo }) {
       <button onClick={() => {
         setTitle('');
         onAddTodo(title);
-      }}>Add</button>
+      }}>添加</button>
     </>
   )
 }
@@ -1907,7 +1907,7 @@ function Task({ todo, onChange, onDelete }) {
             });
           }} />
         <button onClick={() => setIsEditing(false)}>
-          Save
+          保存
         </button>
       </>
     );
@@ -1916,7 +1916,7 @@ function Task({ todo, onChange, onDelete }) {
       <>
         {todo.title}
         <button onClick={() => setIsEditing(true)}>
-          Edit
+          编辑
         </button>
       </>
     );
@@ -1935,7 +1935,7 @@ function Task({ todo, onChange, onDelete }) {
       />
       {todoContent}
       <button onClick={() => onDelete(todo.id)}>
-        Delete
+        删除
       </button>
     </label>
   );

From 9104e89b9dc0cabfb81189b5faa57a9abdc6fcfe Mon Sep 17 00:00:00 2001
From: KnowsCount <knowscount@gmail.com>
Date: Sat, 22 Jan 2022 14:18:06 +0800
Subject: [PATCH 08/11] Apply suggestions from code review

Co-authored-by: takeItIzzy <48763672+takeItIzzy@users.noreply.github.com>
Co-authored-by: Zhu Ye <38151581+yliaz@users.noreply.github.com>
---
 .../pages/learn/updating-arrays-in-state.md   | 53 ++++++++++---------
 1 file changed, 28 insertions(+), 25 deletions(-)

diff --git a/beta/src/pages/learn/updating-arrays-in-state.md b/beta/src/pages/learn/updating-arrays-in-state.md
index 424e8d9083..50fbe8be0a 100644
--- a/beta/src/pages/learn/updating-arrays-in-state.md
+++ b/beta/src/pages/learn/updating-arrays-in-state.md
@@ -1,5 +1,8 @@
 ---
-title: 修改 State 中的数组
+title: 更新 state 中的数组
+translators:
+  - yliaz
+  - takeItIzzy
 ---
 
 <Intro>
@@ -35,7 +38,7 @@ title: 修改 State 中的数组
 
 <Gotcha>
 
-不幸的是，虽然 [`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 和 [`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 的名字相似，但作用却迥然不同：
+不幸的是，虽然 [`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 和 [`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) 的名字相似，但作用却迥然不同：
 
 * `slice` 让你可以拷贝数组或是数组的一部分。
 * `splice` **会直接修改** 原始数组（插入或者删除元素）。
@@ -46,7 +49,7 @@ title: 修改 State 中的数组
 
 ### 向数组中添加元素 {/*adding-to-an-array*/}
 
-`push()` 会直接修改原始数组，这是你所不希望的：
+`push()` 会直接修改原始数组，而你不希望这样：
 
 <Sandpack>
 
@@ -89,7 +92,7 @@ button { margin-left: 5px; }
 
 </Sandpack>
 
-相反，你应该创建一个*新*数组，其包含了原始数组的所有元素*以及*一个在末尾的新元素。这可以通过很多种方法实现，最简单的一种就是使用 `...` [数组展开](a-javascript-refresher#array-spread) 语法：
+相反，你应该创建一个 *新* 数组，其包含了原始数组的所有元素 *以及* 一个在末尾的新元素。这可以通过很多种方法实现，最简单的一种就是使用 `...` [数组展开](a-javascript-refresher#array-spread) 语法：
 
 ```js
 setArtists( // 替换 state
@@ -200,7 +203,7 @@ export default function List() {
 
 </Sandpack>
 
-点击“删除”按钮几次，并且查看按钮处理点击事件的代码。
+点击 “删除” 按钮几次，并且查看按钮处理点击事件的代码。
 
 ```js
 setArtists(
@@ -214,7 +217,7 @@ setArtists(
 
 如果你想改变数组中的某些或全部元素，你可以用 `map()` 创建一个**新**数组。你传入 `map` 的函数决定了要根据每个元素的值或索引（或二者都要）对元素做何处理。
 
-在下面的例子中，数组中记录了两个圆形和一个正方形的坐标。当你点击按钮时，仅有两个圆形会向下移动 100 像素。这是通过使用 `map()` 生成一个新数组实现的。
+在下面的例子中，一个数组记录了两个圆形和一个正方形的坐标。当你点击按钮时，仅有两个圆形会向下移动 100 像素。这是通过使用 `map()` 生成一个新数组实现的。
 
 <Sandpack>
 
@@ -235,17 +238,17 @@ export default function ShapeEditor() {
   function handleClick() {
     const nextShapes = shapes.map(shape => {
       if (shape.type === 'square') {
-        // 不改变
+        // 不作改变
         return shape;
       } else {
-        // 返回一个圆形，位置在下方 50px 处
+        // 返回一个新的圆形，位置在下方 50px 处
         return {
           ...shape,
           y: shape.y + 50,
         };
       }
     });
-    // 使用新的数组重渲染
+    // 使用新的数组进行重渲染
     setShapes(nextShapes);
   }
 
@@ -280,7 +283,7 @@ body { height: 300px; }
 
 ### 替换数组中的元素 {/*replacing-items-in-an-array*/}
 
-替换数组中一个或多个元素是非常常见的操作。类似 `arr[0] = 'bird'` 这样的赋值语句会改变原始数组，所以这种情况下，你也应该考虑使用 `map` 方法。
+想要替换数组中一个或多个元素是非常常见的。类似 `arr[0] = 'bird'` 这样的赋值语句会直接修改原始数组，所以在这种情况下，你也应该使用 `map`。
 
 要替换一个元素，请使用 `map` 创建一个新数组。在你的 `map` 回调里，第二个参数是元素的索引。使用索引来判断最终是返回原始的元素（即回调的第一个参数）还是替换成其他值：
 
@@ -301,7 +304,7 @@ export default function CounterList() {
   function handleIncrementClick(index) {
     const nextCounters = counters.map((c, i) => {
       if (i === index) {
-        // 点击计数器递增
+        // 递增被点击的计数器数值
         return c + 1;
       } else {
         // 其余部分不发生变化
@@ -400,7 +403,7 @@ button { margin-left: 5px; }
 
 总会有一些事，是你仅仅依靠展开运算符和 `map()` 或者 `filter()` 等不会直接修改原值的方法所无法做到的。例如，你可能想翻转数组，或是对数组排序。而 JavaScript 中的 `reverse()` 和 `sort()` 方法会改变原数组，所以你无法直接使用它们。
 
-**但是，你可以先将数组复制一份，再执行对应的操作。**
+**然而，你可以先拷贝这个数组，再改变这个拷贝后的值。**
 
 例如：
 
@@ -444,11 +447,11 @@ export default function List() {
 
 在这段代码中，你先使用 `[...list]` 展开运算符创建了一份数组的拷贝值。当你有了这个拷贝值后，你就可以使用像 `nextList.reverse()` 或 `nextList.sort()` 这样直接修改原数组的方法。你甚至可以通过 `nextList[0] = "something"` 这样的方式对数组中的特定元素进行赋值。
 
-然而，**即使你拷贝了数组，你还是不能直接修改其_内部_的元素**。这是因为数组的拷贝是浅拷贝——新的数组中依然保留了与原始数组相同的元素。因此，如果你修改了拷贝数组内部的某个对象，其实你正在直接修改当前的 state 。举个例子，像下面的代码就会带来问题。
+然而，**即使你拷贝了数组，你还是不能直接修改其_内部_的元素**。这是因为数组的拷贝是浅拷贝——新的数组中依然保留了与原始数组相同的元素。因此，如果你修改了拷贝数组内部的某个对象，其实你正在直接修改当前的 state。举个例子，像下面的代码就会带来问题。
 
 ```js
 const nextList = [...list];
-nextList[0].seen = true; // 问题：改变了 list[0] 的值
+nextList[0].seen = true; // 问题：直接修改了 list[0] 的值
 setList(nextList);
 ```
 
@@ -460,7 +463,7 @@ setList(nextList);
 
 <!-- TODOODLE -->
 
-**当你更新一个嵌套的 state 时，你需要从需要更新的地方开始自底向上创建一份完整的拷贝。** 让我们看一下具体是怎么操作的。
+**当你更新一个嵌套的 state 时，你需要从想要更新的地方创建拷贝值，一直这样，直到顶层。** 让我们看一下这该怎么做。
 
 在下面的例子中，两个不同的艺术品清单有着相同的初始 state。他们本应该互不影响，但是因为一次 mutation，他们的 state 被意外地共享了，勾选一个清单中的事项会影响另外一个清单：
 
@@ -655,14 +658,14 @@ function ItemList({ artworks, onToggle }) {
 
 </Sandpack>
 
-通常来讲，**你应该只直接修改你刚刚创建的对象**。如果你在插入一个*新*的 artwork，你可以修改它，但是如果你想要改变的是 state 中已经存在的东西，你就需要先拷贝一份了。
+通常来讲，**你应该只直接修改你刚刚创建的对象**。如果你正在插入一个*新*的 artwork，你可以修改它，但是如果你想要改变的是 state 中已经存在的东西，你就需要先拷贝一份了。
 
 ### 使用 Immer 编写简洁的更新逻辑 {/*write-concise-update-logic-with-immer*/}
 
 在没有 mutation 的前提下更新嵌套数组可能会变得有点重复。[就像对对象一样](/learn/updating-objects-in-state#write-concise-update-logic-with-immer):
 
-- 通常情况下，你应该不需要更新处于非常深的层级的 state 。如果你有此类需求，你或许需要[调整一下数据的结构](/learn/choosing-the-state-structure#avoid-deeply-nested-state)，让数据变得扁平一些。
-- 如果你不想改变 state 中的数据结构，你也许会更喜欢使用 [Immer](https://github.com/immerjs/use-immer) ，它让你可以继续使用方便的，但会直接修改原值的语法，并负责为你生成拷贝值。
+- 通常情况下，你应该不需要更新处于非常深层级的 state 。如果你有此类需求，你或许需要[调整一下数据的结构](/learn/choosing-the-state-structure#avoid-deeply-nested-state)，让数据变得扁平一些。
+- 如果你不想改变 state 的数据结构，你也许会更喜欢使用 [Immer](https://github.com/immerjs/use-immer) ，它让你可以继续使用方便的，但会直接修改原值的语法，并负责为你生成拷贝值。
 
 下面是我们用 Immer 来重写的 Art Bucket List 的例子：
 
@@ -774,14 +777,14 @@ updateMyTodos(draft => {
 });
 ```
 
-这是因为你并不是在直接修改_原始的_ state ，而是在修改 Immer 提供的一个特殊的 `draft` 对象。同理，你也可以为 `draft` 的内容使用 `push()` 和 `pop()` 这些会直接修改原值的方法。
+这是因为你并不是在直接修改_原始的_ state，而是在修改 Immer 提供的一个特殊的 `draft` 对象。同理，你也可以为 `draft` 的内容使用 `push()` 和 `pop()` 这些会直接修改原值的方法。
 
 在幕后，Immer 总是会根据你对 `draft` 的修改来从头开始构建下一个 state。这使得你的事件处理程序非常的简洁，同时也不会直接修改 state。
 
 <Recap>
 
 - 你可以把数组放入 state 中，但你不应该直接修改它。
-- 不要直接修改数组，而是创建它的一份*新的*拷贝，然后使用新的数组来更新它的状态。
+- 不要直接修改数组，而是创建它的一份 *新的* 拷贝，然后使用新的数组来更新它的状态。
 - 你可以使用 `[...arr, newItem]` 这样的数组展开语法来向数组中添加元素。
 - 你可以使用 `filter()` 和 `map()` 来创建一个经过过滤或者变换的数组。
 - 你可以使用 Immer 来保持代码简洁。
@@ -794,7 +797,7 @@ updateMyTodos(draft => {
 
 ### 更新购物车中的商品 {/*update-an-item-in-the-shopping-cart*/}
 
-填入 `handleIncreaseClick` 的逻辑，以便按下“+”时对应数字递增：
+填写 `handleIncreaseClick` 的逻辑，以便按下“+”时递增对应数字：
 
 <Sandpack>
 
@@ -1082,7 +1085,7 @@ button { margin: 5px; }
 
 ### 使用不会直接修改原始值的方法修复 mutation 的问题 {/*fix-the-mutations-using-non-mutative-methods*/}
 
-在下面的例子中，`App.js` 中所有的事件处理函数都会产生 mutation 。这就造成了编辑和删除任意 todo 都没有反应。 你需要通过重写 `handleAddTodo`, `handleChangeTodo`, 和 `handleDeleteTodo` 这三个函数来解决这个问题：
+在下面的例子中，`App.js` 中所有的事件处理程序都会产生 mutation。这导致编辑和删除待办事项的功能无法正常运行。使用不会直接修改原始值的方法重写 `handleAddTodo`、`handleChangeTodo` 和 `handleDeleteTodo` 这三个函数：
 
 <Sandpack>
 
@@ -1245,7 +1248,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-在 `handleAddTodo` 中，你可以使用数组展开语法。在 `handleChangeTodo` 中，你可以使用 `map` 创建一个新数组。在 `handleDeleteTodo` 中，你可以使用 `filter` 创建一个新数组。现在列表可以正常工作了：
+在 `handleAddTodo` 中，你可以使用数组展开语法；在 `handleChangeTodo` 中，你可以使用 `map` 创建一个新数组；在 `handleDeleteTodo` 中，你可以使用 `filter` 创建一个新数组。现在列表可以正常工作了：
 
 <Sandpack>
 
@@ -1415,7 +1418,7 @@ ul, li { margin: 0; padding: 0; }
 
 ### 使用 Immer 修复 mutation 的问题 {/*fix-the-mutations-using-immer*/}
 
-下面的例子和上一个挑战的相同。这次，你需要使用 Immer 来修复 mutation 的问题。为了你的方便，`useImmer` 已经被引入了，你需要使用它来替换 `todos` 的 state 变量。
+下面的例子和上一个挑战的相同。这次，你需要使用 Immer 来修复 mutation 的问题。为了方便，`useImmer` 已经被引入了，你需要使用它来替换 `todos` 的 state 变量。
 
 <Sandpack>
 
@@ -1783,7 +1786,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-你也可以在 Immer 中将会产生和不会产生 mutation 的方法混合使用。
+你还可以在 Immer 中混合使用会改变和不会改变原始值的方法。
 
 例如，在下面的代码中，`handleAddTodo`是通过直接修改 Immer 的 `draft` 实现的，而 `handleChangeTodo` 和 `handleDeleteTodo` 则使用了不会直接修改原始值的 `map` 和 `filter` 方法：
 

From ffd73e8e2a98b92ce7805410eb11e46ea7aec707 Mon Sep 17 00:00:00 2001
From: KnowsCount <knowscount@gmail.com>
Date: Sat, 22 Jan 2022 14:18:49 +0800
Subject: [PATCH 09/11] update translators

---
 beta/src/pages/learn/updating-arrays-in-state.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/beta/src/pages/learn/updating-arrays-in-state.md b/beta/src/pages/learn/updating-arrays-in-state.md
index 50fbe8be0a..0f8dec2cb8 100644
--- a/beta/src/pages/learn/updating-arrays-in-state.md
+++ b/beta/src/pages/learn/updating-arrays-in-state.md
@@ -3,6 +3,7 @@ title: 更新 state 中的数组
 translators:
   - yliaz
   - takeItIzzy
+  - KnowsCount
 ---
 
 <Intro>

From afdca66b92b4d104003dc799918337ddb6967077 Mon Sep 17 00:00:00 2001
From: KnowsCount <knowscount@gmail.com>
Date: Fri, 22 Jul 2022 14:20:49 +0800
Subject: [PATCH 10/11] fix: formatting issues

---
 beta/src/pages/learn/updating-arrays-in-state.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/beta/src/pages/learn/updating-arrays-in-state.md b/beta/src/pages/learn/updating-arrays-in-state.md
index 0f8dec2cb8..72b8036177 100644
--- a/beta/src/pages/learn/updating-arrays-in-state.md
+++ b/beta/src/pages/learn/updating-arrays-in-state.md
@@ -65,7 +65,7 @@ export default function List() {
 
   return (
     <>
-      <h1>令人惊叹的雕塑家们：</h1>
+      <h1>振奋人心的雕塑家们：</h1>
       <input
         value={name}
         onChange={e => setName(e.target.value)}
@@ -119,7 +119,7 @@ export default function List() {
 
   return (
     <>
-      <h1>令人惊叹的雕塑家们：</h1>
+      <h1>振奋人心的雕塑家们：</h1>
       <input
         value={name}
         onChange={e => setName(e.target.value)}
@@ -180,7 +180,7 @@ export default function List() {
 
   return (
     <>
-      <h1>令人惊叹的雕塑家们：</h1>
+      <h1>振奋人心的雕塑家们：</h1>
       <ul>
         {artists.map(artist => (
           <li key={artist.id}>
@@ -204,7 +204,7 @@ export default function List() {
 
 </Sandpack>
 
-点击 “删除” 按钮几次，并且查看按钮处理点击事件的代码。
+点击“删除”按钮几次，并且查看按钮处理点击事件的代码。
 
 ```js
 setArtists(
@@ -212,7 +212,7 @@ setArtists(
 );
 ```
 
-这里，`artists.filter(s => s.id !== artist.id)` 表示 “创建一个新的数组，该数组由那些 ID 与 `artists.id` 不同的 `artists` 组成”。换句话说，每个 artist 的“删除”按钮会把 _那一个_ artist 从原始数组中过滤掉，并使用过滤后的数组再次进行渲染。注意，`filter` 并不会改变原始数组。
+这里，`artists.filter(s => s.id !== artist.id)` 表示“创建一个新的数组，该数组由那些 ID 与 `artists.id` 不同的 `artists` 组成”。换句话说，每个 artist 的“删除”按钮会把 _那一个_ artist 从原始数组中过滤掉，并使用过滤后的数组再次进行渲染。注意，`filter` 并不会改变原始数组。
 
 ### 转换数组 {/*transforming-an-array*/}
 
@@ -363,11 +363,11 @@ export default function List() {
   function handleClick() {
     const insertAt = 1; // 可能是任何索引
     const nextArtists = [
-      // 插入点之前的元素:
+      // 插入点之前的元素：
       ...artists.slice(0, insertAt),
-      // 新的元素:
+      // 新的元素：
       { id: nextId++, name: name },
-      // 插入点之后的元素:
+      // 插入点之后的元素：
       ...artists.slice(insertAt)
     ];
     setArtists(nextArtists);

From 5988d6b18cb0b46afc382cf080abb1593538b631 Mon Sep 17 00:00:00 2001
From: KnowsCount <knowscount@gmail.com>
Date: Fri, 22 Jul 2022 14:22:20 +0800
Subject: [PATCH 11/11] fix: give 'art bucket list' a proper translation

---
 beta/src/pages/learn/updating-arrays-in-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/pages/learn/updating-arrays-in-state.md b/beta/src/pages/learn/updating-arrays-in-state.md
index 72b8036177..f950be60e1 100644
--- a/beta/src/pages/learn/updating-arrays-in-state.md
+++ b/beta/src/pages/learn/updating-arrays-in-state.md
@@ -668,7 +668,7 @@ function ItemList({ artworks, onToggle }) {
 - 通常情况下，你应该不需要更新处于非常深层级的 state 。如果你有此类需求，你或许需要[调整一下数据的结构](/learn/choosing-the-state-structure#avoid-deeply-nested-state)，让数据变得扁平一些。
 - 如果你不想改变 state 的数据结构，你也许会更喜欢使用 [Immer](https://github.com/immerjs/use-immer) ，它让你可以继续使用方便的，但会直接修改原值的语法，并负责为你生成拷贝值。
 
-下面是我们用 Immer 来重写的 Art Bucket List 的例子：
+下面是我们用 Immer 来重写的艺术愿望清单的例子：
 
 <Sandpack>