[Beta]: docs(cn): updating-objects-in-state #664

yliaz · 2021-11-13T11:52:32Z

完成初稿。

Neo42

校对完毕，麻烦处理一下，谢谢 @yliaz

Neo42 · 2021-12-19T05:43:21Z

beta/src/pages/learn/updating-objects-in-state.md

+- 如何正确地更新 React state 中的对象
+- 如何在不产生 mutation 的情况下更新一个嵌套对象
+- 什么事不可变性，以及如何不破坏它
+- 如何使用 Immer 来减少对象重复复制的次数

 </YouWillLearn>

 ## What's a mutation? {#whats-a-mutation}


Suggested change

## What's a mutation? {#whats-a-mutation}

## 什么是 mutation? {#whats-a-mutation}

Neo42 · 2021-12-19T05:46:01Z

beta/src/pages/learn/updating-objects-in-state.md


 </YouWillLearn>

 ## What's a mutation? {#whats-a-mutation}

-You can store any kind of JavaScript value in state.
+您可以在 state 中存放任何类型的 JavaScript 值。


Suggested change

您可以在 state 中存放任何类型的 JavaScript 值。

你可以在 state 中存放任何类型的 JavaScript 值。

全文人称要统一

Neo42 · 2021-12-19T05:53:44Z

beta/src/pages/learn/updating-objects-in-state.md


 ```js
 setX(5);
 ```

-The `x` state changed from `0` to `5`, but the _number `0` itself_ did not change. It's not possible to make any changes to the built-in primitive values like numbers, strings, and booleans in JavaScript.
+变量 `x` 的 state 从 `0` 变为 `5` ，但是*数字 `0` 本身*并没有发生改变。在JavaScript中，不可能对内置的原始值如数字、字符串和布尔值进行任何改变。


Suggested change

变量 `x` 的 state 从 `0` 变为 `5` ，但是*数字 `0` 本身*并没有发生改变。在JavaScript中，不可能对内置的原始值如数字、字符串和布尔值进行任何改变。

state `x` 从 `0` 变为 `5` ，但是*数字 `0` 本身*并没有发生改变。在JavaScript中，对内置的原始值如数字、字符串和布尔值进行改变是不可能的。

最后一句是主语从句，真正的主语是 ”to make any changes to the built-in primitive values like numbers, strings, and booleans in JavaScript”，理解时需要把主语提前，所以原句可以按“To ... is not possible” 理解。

Neo42 · 2021-12-19T06:02:10Z

beta/src/pages/learn/updating-objects-in-state.md


 ```js
 const [position, setPosition] = useState({ x: 0, y: 0 });
 ```

-Technically, it is possible to change the contents of _the object itself_. **This is called a mutation:**
+从技术上来说，是可以直接改变*对象本身*的内容的。**当您这样做时，就制造了一个 mutation。**


Suggested change

从技术上来说，是可以直接改变*对象本身*的内容的。**当您这样做时，就制造了一个 mutation。**

其实，直接改变*对象本身*的内容是有可能做到的。**当您这样做时，就制造了一个 mutation。**

technically：实际上、严格来说

possible: 有可能做到

“it is possible to...” 主语从句，主语需要提前

Neo42 · 2021-12-19T06:04:11Z

beta/src/pages/learn/updating-objects-in-state.md

 layout: Learn
 ---

 <Intro>

-State can hold any kind of JavaScript value, including objects. But you shouldn't change objects that you hold in the React state directly. Instead, when you want to update an object, you need to create a new one (or make a copy of an existing one), and then set the state to use that copy.
+state 中可以存放任意种类的 JavaScript 值，当然也包括对象。但是您不应该直接修改存放在 React 的 state 中的对象。取而代之的，当您想要更新一个对象时，您需要创建一个新的对象（或者依照当前对象复制出一份新的），然后把这个新的对象设置到 state 上。


Suggested change

state 中可以存放任意种类的 JavaScript 值，当然也包括对象。但是您不应该直接修改存放在 React 的 state 中的对象。取而代之的，当您想要更新一个对象时，您需要创建一个新的对象（或者依照当前对象复制出一份新的），然后把这个新的对象设置到 state 上。

state 中可以存放任意种类的 JavaScript 值，当然也包括对象。但是你不应该直接修改存放在 React 的 state 中的对象。取而代之的，当你想要更新一个对象时，你需要创建一个新的对象（或者依照当前对象复制出一份新的），然后把这个新的对象设置到 state 上。

Neo42 · 2021-12-19T10:09:34Z

beta/src/pages/learn/updating-objects-in-state.md


-Find the bug and fix it.
+找到问题所在并修复它。


Suggested change

找到问题所在并修复它。

找到 bug 并修复它。

Neo42 · 2021-12-19T10:16:00Z

beta/src/pages/learn/updating-objects-in-state.md

@@ -1122,9 +1124,9 @@ select { margin-bottom: 10px; }

 <Solution>

-The problem was in the mutation inside `handleMove`. It mutated `shape.position`, but that's the same object that `initialPosition` points at. This is why both the shape and the background move. (It's a mutation, so the change doesn't reflect on the screen until an unrelated update--the color change--triggers a re-render.)
+问题出在 `handleMove` 中的 mutation 。它直接修改了 `shape.position` ，但是此时 `initialPosition` 所指向的也是同一个对象。因此方形和背景都发生了移动。（因为是 mutation ，所以变化并没有立即反映到屏幕上，而是等到最近一次相关的更新，也就是颜色变化，才触发了一次重渲染。）


Suggested change

问题出在 `handleMove` 中的 mutation 。它直接修改了 `shape.position` ，但是此时 `initialPosition` 所指向的也是同一个对象。因此方形和背景都发生了移动。（因为是 mutation ，所以变化并没有立即反映到屏幕上，而是等到最近一次相关的更新，也就是颜色变化，才触发了一次重渲染。）

问题出在 `handleMove` 中的 mutation 。它直接修改了 `shape.position` ，但是此时 `initialPosition` 所指向的也是同一个对象。因此方形和背景都发生了移动。（因为它是 mutation，所以直到一个不相关更新——颜色变化——触发了一次重新渲染，变化才反映到屏幕上，）

Neo42 · 2021-12-19T10:20:52Z

beta/src/pages/learn/updating-objects-in-state.md


-The fix is to remove the mutation from `handleMove`, and use the spread operator to copy the shape. Note that `+=` is a mutation, so you need to rewrite it to use a regular `+` operation.
+修复问题的方法就是从 `handleMove` 中移除这个 mutation ，然后用展开运算符来复制方形对象。请注意 `+=` 是 mutation 的一种，所以你需要用正常的 “+” 来重写。


Suggested change

修复问题的方法就是从 `handleMove` 中移除这个 mutation ，然后用展开运算符来复制方形对象。请注意 `+=` 是 mutation 的一种，所以你需要用正常的 “+” 来重写。

修复问题的方法就是从 `handleMove` 中移除这个 mutation ，然后用展开运算符来复制方形对象。请注意 `+=` 是 mutation 的一种，所以你需要对它进行重写来使用普通的 `+` 操作符。

Neo42 · 2021-12-19T10:23:45Z

beta/src/pages/learn/updating-objects-in-state.md


-This is the same buggy example as in the previous challenge. This time, fix the mutation by using Immer. For your convenience, `useImmer` is already imported, so you need to change the `shape` state variable to use it.
+这里的例子和上面那段有问题的代码是相同的。这次，试着用 Immer 来修复 mutation 的问题。为了你的便捷，`useImmer` 已经被引入了，因此你只需要修改 `shape` 这个 state 来使用它。


Suggested change

这里的例子和上面那段有问题的代码是相同的。这次，试着用 Immer 来修复 mutation 的问题。为了你的便捷，`useImmer` 已经被引入了，因此你只需要修改 `shape` 这个 state 来使用它。

这里的例子和上面那段有 bug 的代码是相同的。这一次，试着用 Immer 来修复 mutation 的问题。为了方便你的练习，`useImmer` 已经被引入了，因此你只需要修改 `shape` 这个 state 变量来使用它。

Neo42 · 2021-12-19T10:24:47Z

beta/src/pages/learn/updating-objects-in-state.md

@@ -1446,7 +1448,7 @@ select { margin-bottom: 10px; }

 <Solution>

-This is the solution rewritten with Immer. Notice how the event handlers are written in a mutating fashion, but the bug does not occur. This is because under the hood, Immer never mutates the existing objects.
+下面的代码是使用 Immer 重写的。请注意代码中的事件处理函数仍然是以直接修改对象的方式书写的，但是代码不会产生任何问题了。这是因为从本质上来说，Immer 从来没有直接修改现有的对象。


Suggested change

下面的代码是使用 Immer 重写的。请注意代码中的事件处理函数仍然是以直接修改对象的方式书写的，但是代码不会产生任何问题了。这是因为从本质上来说，Immer 从来没有直接修改现有的对象。

下面的代码是使用 Immer 重写的。请注意代码中的事件处理函数仍然是以直接修改对象的方式书写的，但是代码不会产生任何问题了。这是因为从原理上来说，Immer 从来没有直接修改现有的对象。

Neo42 · 2021-12-19T10:30:21Z

代码中的英文文本也需要翻译，还有译者署名需要添加一下 @yliaz

title: '更新 state 中的对象'
layout: Learn
translators: 
  - Neo42
  - yliaz

yliaz · 2021-12-19T23:19:47Z

校对完毕，麻烦处理一下，谢谢 @yliaz

收到，会尽快处理。辛苦了！

QC-L · 2021-12-20T01:32:04Z

冲突需要解决下，谢谢

yliaz · 2021-12-21T12:56:25Z

beta/src/pages/learn/updating-objects-in-state.md

 ---
-title: Updating Objects in State
+title: 更新 state 中的对象
 layout: Learn
 ---


Suggested change

---

title: Updating Objects in State

title: 更新 state 中的对象

layout: Learn

---

---

title: '更新 state 中的对象'

layout: Learn

translators:

- Neo42

- yliaz

---

awxiaoxian2020 · 2023-02-23T14:54:05Z

Could you please fix the conflicts?

awxiaoxian2020 · 2023-03-01T10:03:30Z

由于文章变更过多，且长时间未回应，暂时关闭此 PR。

yliaz added 2 commits November 10, 2021 11:50

完成0-800行

436a4c0

完成初稿

8cb754c

vercel bot deployed to Preview November 13, 2021 11:52 View deployment

github-actions bot added the beta label Nov 13, 2021

Merge branch 'main' into updating-objects-in-state

2aca2e3

vercel bot deployed to Preview November 13, 2021 12:02 View deployment

yliaz mentioned this pull request Nov 13, 2021

Translation Progress Assignment Claims #602

Open

QC-L mentioned this pull request Dec 7, 2021

Tasks of Review #684

Closed

Neo42 reviewed Dec 19, 2021

View reviewed changes

yliaz commented Dec 21, 2021

View reviewed changes

Merge branch 'main' into updating-objects-in-state

e6e3c06

vercel bot deployed to Preview – zh-hans.reactjs.org December 26, 2021 16:12 View deployment

vercel bot deployed to Preview – zh-hans-reactjs-org December 26, 2021 16:12 View deployment

awxiaoxian2020 added Pending Modify 已校对，待修改阶段 need adjust structure 内容结构已过时，需要调整 and removed Pending Modify 已校对，待修改阶段 labels Feb 14, 2023

awxiaoxian2020 mentioned this pull request Feb 16, 2023

The previous Pull Requests need to adjust the directory structure #1063

Closed

awxiaoxian2020 closed this Mar 1, 2023

Debbl mentioned this pull request Apr 23, 2023

docs(cn): translate learn/updating-objects-in-state into Chinese #1136

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Beta]: docs(cn): updating-objects-in-state #664

[Beta]: docs(cn): updating-objects-in-state #664

yliaz commented Nov 13, 2021

Neo42 left a comment

Neo42 Dec 19, 2021

Neo42 Dec 19, 2021

Neo42 Dec 19, 2021

Neo42 Dec 19, 2021

Neo42 Dec 19, 2021

Neo42 Dec 19, 2021

Neo42 Dec 19, 2021

Neo42 Dec 19, 2021

Neo42 Dec 19, 2021

Neo42 Dec 19, 2021

Neo42 commented Dec 19, 2021

yliaz commented Dec 19, 2021

QC-L commented Dec 20, 2021

yliaz Dec 21, 2021

awxiaoxian2020 commented Feb 23, 2023

awxiaoxian2020 commented Mar 1, 2023

	## What's a mutation? {#whats-a-mutation}
	## 什么是 mutation? {#whats-a-mutation}

	您可以在 state 中存放任何类型的 JavaScript 值。
	你可以在 state 中存放任何类型的 JavaScript 值。

	变量 `x` 的 state 从 `0` 变为 `5` ，但是数字 `0` 本身并没有发生改变。在JavaScript中，不可能对内置的原始值如数字、字符串和布尔值进行任何改变。
	state `x` 从 `0` 变为 `5` ，但是数字 `0` 本身并没有发生改变。在JavaScript中，对内置的原始值如数字、字符串和布尔值进行改变是不可能的。

	从技术上来说，是可以直接改变对象本身的内容的。当您这样做时，就制造了一个 mutation。
	其实，直接改变对象本身的内容是有可能做到的。当您这样做时，就制造了一个 mutation。

	state 中可以存放任意种类的 JavaScript 值，当然也包括对象。但是您不应该直接修改存放在 React 的 state 中的对象。取而代之的，当您想要更新一个对象时，您需要创建一个新的对象（或者依照当前对象复制出一份新的），然后把这个新的对象设置到 state 上。
	state 中可以存放任意种类的 JavaScript 值，当然也包括对象。但是你不应该直接修改存放在 React 的 state 中的对象。取而代之的，当你想要更新一个对象时，你需要创建一个新的对象（或者依照当前对象复制出一份新的），然后把这个新的对象设置到 state 上。

	问题出在 `handleMove` 中的 mutation 。它直接修改了 `shape.position` ，但是此时 `initialPosition` 所指向的也是同一个对象。因此方形和背景都发生了移动。（因为是 mutation ，所以变化并没有立即反映到屏幕上，而是等到最近一次相关的更新，也就是颜色变化，才触发了一次重渲染。）
	问题出在 `handleMove` 中的 mutation 。它直接修改了 `shape.position` ，但是此时 `initialPosition` 所指向的也是同一个对象。因此方形和背景都发生了移动。（因为它是 mutation，所以直到一个不相关更新——颜色变化——触发了一次重新渲染，变化才反映到屏幕上，）


		The fix is to remove the mutation from `handleMove`, and use the spread operator to copy the shape. Note that `+=` is a mutation, so you need to rewrite it to use a regular `+` operation.
		修复问题的方法就是从 `handleMove` 中移除这个 mutation ，然后用展开运算符来复制方形对象。请注意 `+=` 是 mutation 的一种，所以你需要用正常的 “+” 来重写。


		This is the same buggy example as in the previous challenge. This time, fix the mutation by using Immer. For your convenience, `useImmer` is already imported, so you need to change the `shape` state variable to use it.
		这里的例子和上面那段有问题的代码是相同的。这次，试着用 Immer 来修复 mutation 的问题。为了你的便捷，`useImmer` 已经被引入了，因此你只需要修改 `shape` 这个 state 来使用它。

	这里的例子和上面那段有问题的代码是相同的。这次，试着用 Immer 来修复 mutation 的问题。为了你的便捷，`useImmer` 已经被引入了，因此你只需要修改 `shape` 这个 state 来使用它。
	这里的例子和上面那段有 bug 的代码是相同的。这一次，试着用 Immer 来修复 mutation 的问题。为了方便你的练习，`useImmer` 已经被引入了，因此你只需要修改 `shape` 这个 state 变量来使用它。

	下面的代码是使用 Immer 重写的。请注意代码中的事件处理函数仍然是以直接修改对象的方式书写的，但是代码不会产生任何问题了。这是因为从本质上来说，Immer 从来没有直接修改现有的对象。
	下面的代码是使用 Immer 重写的。请注意代码中的事件处理函数仍然是以直接修改对象的方式书写的，但是代码不会产生任何问题了。这是因为从原理上来说，Immer 从来没有直接修改现有的对象。

[Beta]: docs(cn): updating-objects-in-state #664

[Beta]: docs(cn): updating-objects-in-state #664

Conversation

yliaz commented Nov 13, 2021

Neo42 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Neo42 commented Dec 19, 2021

yliaz commented Dec 19, 2021

QC-L commented Dec 20, 2021

Choose a reason for hiding this comment

awxiaoxian2020 commented Feb 23, 2023

awxiaoxian2020 commented Mar 1, 2023