Translated "Updating Objects in State" page #631
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
There was a problem hiding this comment.
Дякую за PR!
Це перша частина перевірки. Було перевірено приклади і деякі слововживання.
Запити на зміни мають бути виправлені і перевірені у всій статті до того, як я почну вичитувати текст у наступних частинах перевірки, щоб зменшити кількість когнітивного навантаження від коректури та редактури того самого. Немає вимог, коли має бути виправлено, це буде просто послідовна асинхронна взаємодія перевірка-зміни-перевірка-зміни-перевірка тощо.
| </Sandpack> | ||
| For example, this line mutates the state from a past render: | ||
| ```js | ||
| setPerson({ | ||
| firstName: e.target.value, // New first name from the input | ||
| firstName: e.target.value, // Нове ім'я, отримане від поля введення |
There was a problem hiding this comment.
| firstName: e.target.value, // Нове ім'я, отримане від поля введення | |
| firstName: e.target.value, // Нове ім'я, отримане з поля введення |
| setPerson({ | ||
| ...person, // Copy the old fields | ||
| firstName: e.target.value // But override this one | ||
| ...person, // Скопіюй старі поля |
There was a problem hiding this comment.
Не впевнена, що імператив до форми тут гарно. І я б уточнила old як попередні значення, але можна ще подумати
| ...person, // Скопіюй старі поля | |
| ...person, // Скопіювати попередні значення полів |
| ...person, // Copy the old fields | ||
| firstName: e.target.value // But override this one | ||
| ...person, // Скопіюй старі поля | ||
| firstName: e.target.value // Але перепиши це |
There was a problem hiding this comment.
відповідно
| firstName: e.target.value // Але перепиши це | |
| firstName: e.target.value // Але переписати значення цього поля |
| name: 'Нікі де Сен Фаль', | ||
| artwork: { | ||
| title: 'Blue Nana', | ||
| city: 'Hamburg', | ||
| title: 'Блакитна Нана', | ||
| city: 'Гамбург', |
There was a problem hiding this comment.
для цього прикладу вже є переклад в репозиторії.
замінити тут і далі
| <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. | ||
| У стані може зберігатися будь-який тип значення JavaScript, включаючи об'єкти. Але вам не варто просто змінювати об'єкти, які ви зберігаєте в стані React. Натомість, коли ви хочете оновити об'єкт, вам потрібно створити новий (або зробити копію того, що існує), а потім задати стан, щоб використати цю копію. |
There was a problem hiding this comment.
включаючи -> включно з
https://onlinecorrector.com.ua/%D0%B2%D0%BA%D0%BB%D1%8E%D1%87%D0%BD%D0%BE-%D0%B7/
існувати -> бути; наявний
https://onlinecorrector.com.ua/%D1%96%D1%81%D0%BD%D1%83%D0%B2%D0%B0%D1%82%D0%B8-%D0%B1%D1%83%D1%82%D0%B8/
| У ній змінюється об'єкт, призначений до `position` з [попереднього рендеру.](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time) Але без використання функції задання стану React не розуміє, що об'єкт змінився. Тому React нічого не робить у відповідь. Це все одно, що ви намагаєтеся змінити замовлення після того, як вже поїли. Хоча мутація стану може спрацювати в деяких випадках, ми не радимо так робити. Вам варто вважати значення стану, до якого ви маєте доступ під час рендеру, доступним тільки для читання. | ||
|
|
||
| To actually [trigger a re-render](/learn/state-as-a-snapshot#setting-state-triggers-renders) in this case, **create a *new* object and pass it to the state setting function:** | ||
| Щоб правильно [збудити повторний рендер](/learn/state-as-a-snapshot#setting-state-triggers-renders) у цьому випадку, **створіть *новий* об'єкт та передайте його у функцію задання стану:** |
There was a problem hiding this comment.
| #### Using a single event handler for multiple fields {/*using-a-single-event-handler-for-multiple-fields*/} | ||
| #### Використання одного обробника подій для багатьох полів {/*using-a-single-event-handler-for-multipple-fields*/} | ||
|
|
||
| You can also use the `[` and `]` braces inside your object definition to specify a property with a dynamic name. Here is the same example, but with a single event handler instead of three different ones: |
There was a problem hiding this comment.
за бажання, можеш зробити pr в основну версію документації React, бо [] - це square brackets чи просто brackets, а braces - це фігурні дужки
| 1. Run `npm install use-immer` to add Immer as a dependency | ||
| 2. Then replace `import { useState } from 'react'` with `import { useImmer } from 'use-immer'` | ||
| 1. Запустіть `npm install use-immer`, щоб додати Immer як залежність |
There was a problem hiding this comment.
| 1. Запустіть `npm install use-immer`, щоб додати Immer як залежність | |
| 1. Виконайте `npm install use-immer`, щоб додати Immer як залежність |
| </DeepDive> | ||
|
|
||
| ## Copying objects with the spread syntax {/*copying-objects-with-the-spread-syntax*/} | ||
| ## Копіювання об'єктів за допомогою синтаксису розгортання {/*copying-objects-with-the-spread-syntax*/} |
There was a problem hiding this comment.
нещодавно домовилися, що не будемо перекладати, а потім розберемося, бо всі перекладають по-різному.
тому тут і далі spread-синтаксис або синтаксис spread
alinkedd
added
Чекає на зміни
Редактура не завершена
and removed
Чекає на перевірку
labels
2 participants
No description provided.