Skip to content

Commit 7a1bba8

Browse files
Apply suggestions from code review
Co-authored-by: Mohammad Reza Badri <[email protected]>
1 parent e7bfa8e commit 7a1bba8

File tree

1 file changed

+4
-4
lines changed

1 file changed

+4
-4
lines changed

src/content/learn/updating-arrays-in-state.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ title: به روز رسانی آرایه‌ها در State
2222

2323
در عوض، هر بار که می‌خواهید یک آرایه را به‌روزرسانی کنید، باید یک آرایه *جدید* را به تابع تنظیم state خود بدهید. برای این کار می‌توانید با فراخوانی متدهای بدون تغییر (non-mutating) مانند `filter()` و `map()` یک آرایه جدید از آرایه اصلی بسازید. سپس می‌توانید state را به آرایه جدید تنظیم کنید.
2424

25-
در اینجا یک جدول مرجع از عملیات‌های رایج بر روی آرایه‌ها را مشاهده می‌کنید. در هنگام کار کردن با آرایه‌ها در state ری‌اکت، باید از استفاده از متد‌های ستون سمت راست خودداری کرده، و در عوض از متد‌های ستون سمت چپ استفاده کنید:
25+
در اینجا یک جدول مرجع از عملیات رایج روی آرایه‌ها آورده شده است. هنگام کار با آرایه‌ها در state ری‌اکت، باید از متدهای ستون سمت چپ پرهیز کنید و در عوض متدهای ستون سمت چپ را ترجیح دهید.
2626

2727
| | خودداری شود (آرایه را تغییر می‌دهد) | ترجیح داده شود (آرایه جدید ایجاد می‌کند) |
2828
| --------- | ----------------------------------- | ------------------------------------------------------------------- |
@@ -441,7 +441,7 @@ export default function List() {
441441

442442
</Sandpack>
443443

444-
در اینجا، شما ابتدا از سینتکس`[...list]` spread برای ایجاد یک کپی از آرایه اصلی استفاده می‌کنید. حال که یک کپی از آن دارید، می‌توانید از متد‌های mutating مانند `nextList.reverse()` یا `nextList.sort()` استفاده کنید، یا حتی آیتم‌ها را به شکل `nextList[0] = "something"` به طور مجزا مقدار دهی کنید.
444+
در اینجا، ابتدا با استفاده از سینتکس spread `[...list]` یک کپی از آرایهٔ اصلی ایجاد می‌کنید. حالا که یک کپی دارید، می‌توانید از متدهای mutating مانند `nextList.reverse()` یا `nextList.sort()` استفاده کنید، یا حتی به‌صورت `nextList[0] = "something"` مستقیماً مقدار یک آیتم را تغییر دهید.
445445

446446
با این حال، **حتی اگر آرایه را کپی کنید، نمی‌توانید آیتم‌های موجود در _داخل_ آن را به طور مستقیم تغییر دهید.** این به این دلیل است که کپی به‌صورت سطحی انجام می‌شود--آرایهٔ جدید همان آیتم‌های آرایهٔ اصلی را در بر خواهد داشت. بنابراین، اگر یک object داخل آرایه کپی‌شده را تغییر دهید، در واقع در حال تغییر state موجود هستید. برای مثال، چنین کدی مشکل ایجاد می‌کند.
447447

@@ -548,9 +548,9 @@ artwork.seen = nextSeen; // Problem: mutates an existing item
548548
setMyList(myNextList);
549549
```
550550

551-
علی‌رغم این که خود آرایه `myNextList` جدید است، *آیتم‌ها* همان آیتم‌های در آرایه اصلی `myList` هستند. بنابراین، تغییر دادن `artwork.seen` آیتم artwork *اصلی* را تغییر می‌دهد. این آیتم artwork در لیست `yourList` نیز وجود دارد، که باعث بروز باگ می‌شود. در نظر گرفتن چنین باگ‌هایی می‌تواند دشوار باشد، اما خوشبختانه اگر از mutate کردن state خودداری کنید این باگ‌ها بروز پیدا نمی‌کنند.
551+
علی‌رغم اینکه آرایه `myNextList` خود جدید است، *آیتم‌ها* همان آیتم‌های آرایه اصلی `myList` هستند. بنابراین، تغییر دادن `artwork.seen` آیتم artwork *اصلی* را تغییر می‌دهد. این آیتم artwork در لیست `yourList` نیز وجود دارد و همین باعث بروز باگ می‌شود. درک چنین باگ‌هایی می‌تواند دشوار باشد، اما اگر از تغییر state خودداری کنید، این باگ‌ها از بین می‌روند.
552552

553-
**شما می‌توانید با استفاده از `map`یک آیتم قدیمی را بدون mutate کردن با نسخه به روز رسانی شده اش جایگزین کنید.**
553+
می‌توانید با استفاده از `map`، یک آیتم قدیمی را بدون تغییر state با نسخهٔ به‌روزرسانی‌شدهٔ آن جایگزین کنید.
554554

555555
```js
556556
setMyList(myList.map(artwork => {

0 commit comments

Comments
 (0)