diff --git a/src/content/learn/updating-arrays-in-state.md b/src/content/learn/updating-arrays-in-state.md index 45c6b70dc..93c04c4cd 100644 --- a/src/content/learn/updating-arrays-in-state.md +++ b/src/content/learn/updating-arrays-in-state.md @@ -1,52 +1,48 @@ --- -title: Updating Arrays in State +title: Обновление массивов в состоянии --- -Arrays are mutable in JavaScript, but you should treat them as immutable when you store them in state. 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. - +Массивы мутабельны в JavaScript, но вы должны относиться к ним как к иммутабельным, когда сохраняете их в состоянии. Также как и в случае с объектами, когда вы хотите обновить массив, хранящийся в состоянии, вам нужно создать новый (или создать копию уже существующего), и затем установить состояние, используя новый массив. - -- 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 +- Как обновлять объект внутри массива +- Как лаконично копировать массив c Immer -## Updating arrays without mutation {/*updating-arrays-without-mutation*/} +## Обновление массивов без мутаций {/*updating-arrays-without-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 как к неизменяемым.** Это также означает, что вы не должны переназначать элементы внутри массива, например как `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. +Вместо этого, каждый раз когда вы захотите обновить массив, вам нужно передать *новый* массив в функцию установки состояния. Чтобы сделать это, вы можете создать новый массив из оригинального в вашем состоянии путем вызовов не-мутирующих методов, таких как `filter()` и `map()`. После вы можете передать в ваше состояние новый полученный массив. -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, вам стоит избегать методов из левой клоноки, и вместо них использовать методы из правой: -| | 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]` синтаксис распостранения ([пример](#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)) | -Alternatively, you can [use Immer](#write-concise-update-logic-with-immer) which lets you use methods from both columns. +В качестве альтернативы, вы можете [использовать Immer](#write-concise-update-logic-with-immer), который позволит вам использовать методы из обоих колонок. +К сожалению, [`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) and [`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) имеют схожие названия, но сильно различаются по поведению: -Unfortunately, [`slice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) and [`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) are named similarly but are very different: - -* `slice` lets you copy an array or a part of it. -* `splice` **mutates** the array (to insert or delete items). - -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. +* `slice` позволяет вам скопировать массив целиком или его часть. +* `splice` **мутирует** массив (вставляет или удаляет элементы). +В React, вы будете использовать `slice` (без `p`!) гораздо чаще, потому что вы не хотите мутировать объекты или массивы в состоянии. В [обновлении объектов](/learn/updating-objects-in-state) объясняется что такое такое мутация, и почему рекомендуется ее избегать в обновлениях состояния. -### Adding to an array {/*adding-to-an-array*/} +### Добавление в массив {/*adding-to-an-array*/} -`push()` will mutate an array, which you don't want: +`push()` мутирует массив, чего вам стоит избегать! @@ -61,7 +57,7 @@ export default function List() { return ( <> -

Inspiring sculptors:

+

Вдохновляющие скульпторы:

setName(e.target.value)} @@ -71,7 +67,7 @@ export default function List() { id: nextId++, name: name, }); - }}>Add + }}>Добавить