feat(i18n): translate src/content/learn/queueing-a-series-of-state-up dates.md from English to Vietnamese#474
Merged
chriskhoa merged 2 commits intoreactjs:mainfrom Jun 16, 2025
Conversation
…dates.md from English to Vietnamese
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
chriskhoa
requested changes
Jun 15, 2025
Collaborator
chriskhoa
left a comment
There was a problem hiding this comment.
Thanks for the contribution. Please view suggestions!
| @@ -1,23 +1,23 @@ | |||
| --- | |||
| title: Queueing a Series of State Updates | |||
| title: Xếp hàng đợi cho một chuỗi các cập nhật state | |||
Collaborator
There was a problem hiding this comment.
Suggested change
| title: Xếp hàng đợi cho một chuỗi các cập nhật state | |
| title: Xử lí hàng đợi cho một chuỗi các cập nhật state liên tiếp |
| <Intro> | ||
|
|
||
| Setting a state variable will queue another render. But sometimes you might want to perform multiple operations on the value before queueing the next render. To do this, it helps to understand how React batches state updates. | ||
| Thiết lập một biến state sẽ đưa một lần render khác vào hàng đợi. Nhưng đôi khi bạn có thể muốn thực hiện nhiều thao tác trên giá trị đó trước khi đưa lần render tiếp theo vào hàng đợi. Để làm điều này, sẽ hữu ích khi hiểu cách React gom nhóm các cập nhật state. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Thiết lập một biến state sẽ đưa một lần render khác vào hàng đợi. Nhưng đôi khi bạn có thể muốn thực hiện nhiều thao tác trên giá trị đó trước khi đưa lần render tiếp theo vào hàng đợi. Để làm điều này, sẽ hữu ích khi hiểu cách React gom nhóm các cập nhật state. | |
| Thiết lập một biến state sẽ đưa một lần render khác vào hàng đợi. Nhưng đôi khi bạn có thể muốn thực hiện nhiều thao tác trên giá trị đó trước khi đưa lần render tiếp theo vào hàng đợi. Để làm điều này, bạn nên hiểu cách React gom nhóm các cập nhật state. |
|
|
||
| * What "batching" is and how React uses it to process multiple state updates | ||
| * How to apply several updates to the same state variable in a row | ||
| * "Batching" là gì và React sử dụng nó như thế nào để xử lý nhiều cập nhật state |
Collaborator
There was a problem hiding this comment.
Suggested change
| * "Batching" là gì và React sử dụng nó như thế nào để xử lý nhiều cập nhật state | |
| * "Batching" (gom nhóm) là gì và React sử dụng nó như thế nào để xử lý nhiều cập nhật state |
| </Sandpack> | ||
|
|
||
| Here, `n => n + 1` is called an **updater function.** When you pass it to a state setter: | ||
| Ở đây, `n => n + 1` được gọi là **updater function.** Khi bạn truyền nó cho một state setter: |
Collaborator
There was a problem hiding this comment.
Suggested change
| Ở đây, `n => n + 1` được gọi là **updater function.** Khi bạn truyền nó cho một state setter: | |
| Ở đây, `n => n + 1` được gọi là **updater (cập nhật) function.** Khi bạn truyền nó cho một state setter: |
| 1. `setNumber(n => n + 1)`: `n => n + 1` là một function. React thêm nó vào hàng đợi. | ||
|
|
||
| When you call `useState` during the next render, React goes through the queue. The previous `number` state was `0`, so that's what React passes to the first updater function as the `n` argument. Then React takes the return value of your previous updater function and passes it to the next updater as `n`, and so on: | ||
| Khi bạn gọi `useState` trong lần render tiếp theo, React duyệt qua hàng đợi. State `number` trước đó là `0`, vì vậy đó là những gì React truyền cho updater function đầu tiên làm tham số `n`. Sau đó React lấy giá trị trả về của updater function trước đó và truyền nó cho updater tiếp theo làm `n`, và cứ thế: |
Collaborator
There was a problem hiding this comment.
Suggested change
| Khi bạn gọi `useState` trong lần render tiếp theo, React duyệt qua hàng đợi. State `number` trước đó là `0`, vì vậy đó là những gì React truyền cho updater function đầu tiên làm tham số `n`. Sau đó React lấy giá trị trả về của updater function trước đó và truyền nó cho updater tiếp theo làm `n`, và cứ thế: | |
| Khi bạn gọi `useState` trong lần render tiếp theo, React duyệt qua hàng đợi. State `number` trước đó là `0`, nên đó là giá trị React truyền cho updater function đầu tiên làm tham số `n`. Sau đó React lấy giá trị trả về của updater function trước đó và truyền nó cho updater tiếp theo làm `n`, và cứ thế: |
| Bạn đang làm việc trên một ứng dụng thị trường nghệ thuật cho phép người dùng gửi nhiều đơn hàng cho một tác phẩm nghệ thuật cùng một lúc. Mỗi khi người dùng nhấn nút "Buy", bộ đếm "Pending" sẽ tăng lên một. Sau ba giây, bộ đếm "Pending" sẽ giảm xuống, và bộ đếm "Completed" sẽ tăng lên. | ||
|
|
||
| However, the "Pending" counter does not behave as intended. When you press "Buy", it decreases to `-1` (which should not be possible!). And if you click fast twice, both counters seem to behave unpredictably. | ||
| Tuy nhiên, bộ đếm "Pending" không hoạt động như dự định. Khi bạn nhấn "Buy", nó giảm xuống `-1` (điều này không thể xảy ra!). Và nếu bạn nhấp nhanh hai lần, cả hai bộ đếm dường như hoạt động không thể đoán trước. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Tuy nhiên, bộ đếm "Pending" không hoạt động như dự định. Khi bạn nhấn "Buy", nó giảm xuống `-1` (điều này không thể xảy ra!). Và nếu bạn nhấp nhanh hai lần, cả hai bộ đếm dường như hoạt động không thể đoán trước. | |
| Tuy nhiên, bộ đếm "Pending" không hoạt động như dự định. Khi bạn nhấn "Buy", nó giảm xuống `-1` (điều này không nên xảy ra!). Và nếu bạn nhấp nhanh hai lần, cả hai bộ đếm dường như hoạt động một cách khó đoán. |
| <Solution> | ||
|
|
||
| Inside the `handleClick` event handler, the values of `pending` and `completed` correspond to what they were at the time of the click event. For the first render, `pending` was `0`, so `setPending(pending - 1)` becomes `setPending(-1)`, which is wrong. Since you want to *increment* or *decrement* the counters, rather than set them to a concrete value determined during the click, you can instead pass the updater functions: | ||
| Bên trong event handler `handleClick`, các giá trị của `pending` và `completed` tương ứng với những gì chúng có tại thời điểm sự kiện click. Đối với lần render đầu tiên, `pending` là `0`, vì vậy `setPending(pending - 1)` trở thành `setPending(-1)`, điều này sai. Vì bạn muốn *tăng* hoặc *giảm* các bộ đếm, thay vì set chúng thành một giá trị cụ thể được xác định trong lúc click, bạn có thể truyền các updater function thay thế: |
Collaborator
There was a problem hiding this comment.
Suggested change
| Bên trong event handler `handleClick`, các giá trị của `pending` và `completed` tương ứng với những gì chúng có tại thời điểm sự kiện click. Đối với lần render đầu tiên, `pending` là `0`, vì vậy `setPending(pending - 1)` trở thành `setPending(-1)`, điều này sai. Vì bạn muốn *tăng* hoặc *giảm* các bộ đếm, thay vì set chúng thành một giá trị cụ thể được xác định trong lúc click, bạn có thể truyền các updater function thay thế: | |
| Bên trong event handler `handleClick`, các giá trị của `pending` và `completed` tương ứng với những gì chúng có tại thời điểm sự kiện click xảy ra. Đối với lần render đầu tiên, `pending` là `0`, vì vậy `setPending(pending - 1)` trở thành `setPending(-1)`, điều này sai. Vì bạn muốn *tăng* hoặc *giảm* các bộ đếm, thay vì gán chúng thành một giá trị cụ thể được xác định trong lúc click, bạn có thể truyền các updater function thay thế: |
| </Sandpack> | ||
|
|
||
| This ensures that when you increment or decrement a counter, you do it in relation to its *latest* state rather than what the state was at the time of the click. | ||
| Điều này đảm bảo rằng khi bạn tăng hoặc giảm một bộ đếm, bạn làm điều đó liên quan đến state *mới nhất* của nó thay vì state tại thời điểm click. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Điều này đảm bảo rằng khi bạn tăng hoặc giảm một bộ đếm, bạn làm điều đó liên quan đến state *mới nhất* của nó thay vì state tại thời điểm click. | |
| Điều này đảm bảo rằng khi bạn tăng hoặc giảm một bộ đếm, bạn thực hiện nó dựa trên state *mới nhất* của bộ đếm thay vì state tại thời điểm click. |
| #### Tự triển khai hàng đợi state {/*implement-the-state-queue-yourself*/} | ||
|
|
||
| In this challenge, you will reimplement a tiny part of React from scratch! It's not as hard as it sounds. | ||
| Trong thử thách này, bạn sẽ tự triển khai một phần nhỏ của React từ đầu! Nó không khó như nghe có vẻ. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Trong thử thách này, bạn sẽ tự triển khai một phần nhỏ của React từ đầu! Nó không khó như nghe có vẻ. | |
| Trong thử thách này, bạn sẽ tự triển khai một phần nhỏ của React từ đầu! Nó không khó như bạn nghĩ. |
| Trong thử thách này, bạn sẽ tự triển khai một phần nhỏ của React từ đầu! Nó không khó như nghe có vẻ. | ||
|
|
||
| Scroll through the sandbox preview. Notice that it shows **four test cases.** They correspond to the examples you've seen earlier on this page. Your task is to implement the `getFinalState` function so that it returns the correct result for each of those cases. If you implement it correctly, all four tests should pass. | ||
| Cuộn qua bản xem trước sandbox. Lưu ý rằng nó hiển thị **bốn test case.** Chúng tương ứng với các ví dụ bạn đã thấy trước đó trên trang này. Nhiệm vụ của bạn là triển khai function `getFinalState` để nó trả về kết quả chính xác cho mỗi trường hợp đó. Nếu bạn triển khai chính xác, tất cả bốn bài test sẽ pass. |
Collaborator
There was a problem hiding this comment.
Suggested change
| Cuộn qua bản xem trước sandbox. Lưu ý rằng nó hiển thị **bốn test case.** Chúng tương ứng với các ví dụ bạn đã thấy trước đó trên trang này. Nhiệm vụ của bạn là triển khai function `getFinalState` để nó trả về kết quả chính xác cho mỗi trường hợp đó. Nếu bạn triển khai chính xác, tất cả bốn bài test sẽ pass. | |
| Hãy xem qua sandbox ở dưới. Lưu ý rằng nó hiển thị **bốn bài test.** Chúng tương ứng với các ví dụ bạn đã thấy trước đó trên trang này. Nhiệm vụ của bạn là triển khai function `getFinalState` để nó trả về kết quả chính xác cho mỗi trường hợp đó. Nếu bạn triển khai chính xác, bạn sẽ vượt qua bốn bài test. |
…dates.md from English to Vietnamese
Size changesDetails📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
Contributor
Author
|
Thanks @chriskhoa! I updated PR based on your suggestion. |
chriskhoa
approved these changes
Jun 16, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🇻🇳 Vietnamese Translation: Queueing a Series of State Updates
Hi! I'm contributing as a volunteer translator for vi.react.dev, and this PR adds the Vietnamese translation for the "Queueing a Series of State Updates" lesson.
What's included
Changes
Looking forward to contributing more translations to the project! 🚀
Tóm tắt những gì đã được dịch:
Tiêu đề và phần Intro:
"Queueing a Series of State Updates" → "Xếp hàng đợi cho một chuỗi các cập nhật state"
Các phần chính:
Phần Challenges: