Skip to content

Translation for Updating Objects in State page #886

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jun 14, 2025
Merged
Changes from 1 commit
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
Prev Previous commit
Next Next commit
fix: text-style
  • Loading branch information
bofeof committed Jun 21, 2023
commit 3651782dfd2d239788fe774273fab8a76e5c3f5b
26 changes: 13 additions & 13 deletions src/content/learn/updating-objects-in-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ title: Обновление объектов в состоянии

<YouWillLearn>

- Как правильно в React обновлять объект в состоянии;
- Как обновить вложенный объект без мутации;
- Что такое иммутабельность, как её не нарушить;
- Как правильно в React обновлять объект в состоянии
- Как обновить вложенный объект без мутации
- Что такое иммутабельность, как её не нарушить
- Как сделать копирование объектов менее повторяющимся и сложным с Immer

</YouWillLearn>
Expand Down Expand Up @@ -199,7 +199,7 @@ setPosition({

</DeepDive>

## Копирование объектов с использованием спред синтаксиса {/*copying-objects-with-the-spread-syntax*/}
## Копирование объектов с использованием спред-синтаксиса {/*copying-objects-with-the-spread-syntax*/}

В предыдущем примере, объект `position` всегда создаётся заново, исходя из текущей позиции курсора. На практике чаще всего вы захотите включать уже *существующие* данные в новый объект, который вы создаёте. Например, вы можете захотеть обновить *только одно* поле в форме, остальные значения полей сохранить без изменений.

Expand Down Expand Up @@ -285,7 +285,7 @@ setPerson({
});
```

Вы можете использовать `...` [спред оператор,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals) чтобы вам не нужно было копировать каждое свойство отдельно.
Вы можете использовать `...` [спред-оператор,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals) чтобы вам не нужно было копировать каждое свойство отдельно.

```js
setPerson({
Expand Down Expand Up @@ -371,7 +371,7 @@ input { margin-left: 5px; margin-bottom: 5px; }

</Sandpack>

Помните, что `...` спред синтаксис является "поверхностным" -- он копирует элементы только на один уровень вглубь. Это свойство делает его быстрым, но это также означает, что если вы хотите обновить вложенное свойство, вам придётся использовать его более одного раза.
Помните, что `...` спред-синтаксис является "поверхностным" -- он копирует элементы только на один уровень вглубь. Это свойство делает его быстрым, но это также означает, что если вы хотите обновить вложенное свойство, вам придётся использовать его более одного раза.

<DeepDive>

Expand Down Expand Up @@ -672,7 +672,7 @@ updatePerson(draft => {

Попробуйте Immer:

1. Запустите в терминале `npm install use-immer`, чтобы добавить Immer как зависимость;
1. Запустите в терминале `npm install use-immer`, чтобы добавить Immer как зависимость
2. Далее замените `import { useState } from 'react'` на `import { useImmer } from 'use-immer'`

Ниже представлен пример с использованием Immer:
Expand Down Expand Up @@ -809,11 +809,11 @@ img { width: 200px; height: 200px; }
<Recap>

* Рассматривайте все состояния в React как иммутабельные (неизменяемые).
* Когда вы храните объекты в состоянии, их прямое изменение не вызовет повторный рендер и изменит состояние в предыдущих "снимках" рендера;
* Вместо этого, создайте *новую* версию объекта и активируйте повторный рендер, установив для него состояние;
* Вы можете использовать спред синтаксис, чтобы создать новый объект на основе копии старого. Например, `{...obj, something: 'newValue'}`;
* Спред синтаксис "поверхностный": копирование объекта происходит только на одном уровне в глубину;
* Чтобы обновить вложенный объект, вам нужно создать копии на всем пути от того места, которое вы обновляете;
* Когда вы храните объекты в состоянии, их прямое изменение не вызовет повторный рендер и изменит состояние в предыдущих "снимках" рендера.
* Вместо этого, создайте *новую* версию объекта и активируйте повторный рендер, установив для него состояние.
* Вы можете использовать спред-синтаксис, чтобы создать новый объект на основе копии старого. Например, `{...obj, something: 'newValue'}`.
* Спред синтаксис "поверхностный": копирование объекта происходит только на одном уровне в глубину.
* Чтобы обновить вложенный объект, вам нужно создать копии на всем пути от того места, которое вы обновляете.
* Для написания лаконичного кода копирования сложного объекта используйте Immer.

</Recap>
Expand Down Expand Up @@ -1132,7 +1132,7 @@ select { margin-bottom: 10px; }

Проблема заключалась в мутации внутри `handleMove`. Он изменил `shape.position`, но это тот же объект, на который указывает `initialPosition`. Вот почему блок и фон двигаются. (Это мутация, поэтому изменение не отражается на экране до тех пор, пока несвязанное обновление -- изменение цвета -- не вызовет повторный рендер)

Необходимо удалить мутацию из `handleMove` и использовать спред синтаксис для копирования формы. Обратите внимание, что `+=` -- мутация, вам нужно переписать её, чтобы использовать обычную операцию `+`
Необходимо удалить мутацию из `handleMove` и использовать спред-синтаксис для копирования формы. Обратите внимание, что `+=` -- мутация, вам нужно переписать её, чтобы использовать обычную операцию `+`

<Sandpack>

Expand Down