feat(i18n): translate src/content/learn/state-a-components-memory.md from English to Vietnamese #472
Conversation
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
…from English to Vietnamese
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
chriskhoa
requested changes
Jun 10, 2025
| @@ -151,54 +151,54 @@ button { | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| The `handleClick` event handler is updating a local variable, `index`. But two things prevent that change from being visible: | |||
| `handleClick` là một trình xử lý sự kiện đang cập nhật một biến cục bộ, `index`. Nhưng hai điều ngăn cản sự thay đổi đó được hiển thị: | |||
There was a problem hiding this comment.
Suggested change
| `handleClick` là một trình xử lý sự kiện đang cập nhật một biến cục bộ, `index`. Nhưng hai điều ngăn cản sự thay đổi đó được hiển thị: | |
| `handleClick` là một trình xử lý sự kiện đang cập nhật một biến cục bộ (local), `index`. Nhưng hai điều ngăn cản sự thay đổi đó được hiển thị: |
|
|
||
| > The `[` and `]` syntax here is called [array destructuring](https://javascript.info/destructuring-assignment) and it lets you read values from an array. The array returned by `useState` always has exactly two items. | ||
| > Cú pháp `[` và `]` ở đây được gọi là [array destructuring](https://javascript.info/destructuring-assignment) và nó cho phép bạn đọc giá trị từ một mảng. Mảng được trả về bởi `useState` luôn có đúng hai mục. |
There was a problem hiding this comment.
Suggested change
| > Cú pháp `[` và `]` ở đây được gọi là [array destructuring](https://javascript.info/destructuring-assignment) và nó cho phép bạn đọc giá trị từ một mảng. Mảng được trả về bởi `useState` luôn có đúng hai mục. | |
| > Cú pháp `[` và `]` ở đây được gọi là [array destructuring](https://javascript.info/destructuring-assignment) và nó cho phép bạn đọc giá trị từ một mảng (array). Mảng được trả về bởi `useState` luôn có đúng hai mục. |
|
|
||
| <Pitfall> | ||
|
|
||
| **Hooks—functions starting with `use`—can only be called at the top level of your components or [your own Hooks.](/learn/reusing-logic-with-custom-hooks)** You can't call Hooks inside conditions, loops, or other nested functions. Hooks are functions, but it's helpful to think of them as unconditional declarations about your component's needs. You "use" React features at the top of your component similar to how you "import" modules at the top of your file. | ||
| **Hooks—các hàm bắt đầu bằng `use`—chỉ có thể được gọi ở cấp độ trên cùng của các component của bạn hoặc [Hooks của riêng bạn.](/learn/reusing-logic-with-custom-hooks)** Bạn không thể gọi Hooks bên trong các điều kiện, vòng lặp, hoặc các hàm lồng ghép khác. Hooks là các hàm, nhưng sẽ hữu ích khi nghĩ về chúng như là các khai báo không điều kiện về các nhu cầu của component của bạn. Bạn "sử dụng" các tính năng của React ở đầu component của bạn tương tự như cách bạn "nhập khẩu" các mô-đun ở đầu file của bạn. |
There was a problem hiding this comment.
Suggested change
| **Hooks—các hàm bắt đầu bằng `use`—chỉ có thể được gọi ở cấp độ trên cùng của các component của bạn hoặc [Hooks của riêng bạn.](/learn/reusing-logic-with-custom-hooks)** Bạn không thể gọi Hooks bên trong các điều kiện, vòng lặp, hoặc các hàm lồng ghép khác. Hooks là các hàm, nhưng sẽ hữu ích khi nghĩ về chúng như là các khai báo không điều kiện về các nhu cầu của component của bạn. Bạn "sử dụng" các tính năng của React ở đầu component của bạn tương tự như cách bạn "nhập khẩu" các mô-đun ở đầu file của bạn. | |
| **Hooks—các hàm bắt đầu bằng `use`—chỉ có thể được gọi ở cấp độ trên cùng của các component của bạn hoặc [Hooks của riêng bạn.](/learn/reusing-logic-with-custom-hooks)** Bạn không thể gọi Hooks bên trong các điều kiện, vòng lặp, hoặc các hàm lồng ghép khác. Hooks là các hàm, nhưng sẽ hữu ích khi nghĩ về chúng như là các khai báo không điều kiện về các nhu cầu của component của bạn. Bạn "sử dụng (use)" các tính năng của React ở đầu component của bạn tương tự như cách bạn "import" các mô-đun ở đầu file của bạn. |
|
|
||
| </Note> | ||
|
|
||
| The only argument to `useState` is the **initial value** of your state variable. In this example, the `index`'s initial value is set to `0` with `useState(0)`. | ||
| Tham số duy nhất của `useState` là **giá trị ban đầu** của biến state của bạn. Trong ví dụ này, giá trị ban đầu của `index` được đặt thành `0` với `useState(0)`. |
There was a problem hiding this comment.
Suggested change
| Tham số duy nhất của `useState` là **giá trị ban đầu** của biến state của bạn. Trong ví dụ này, giá trị ban đầu của `index` được đặt thành `0` với `useState(0)`. | |
| Đối số (Argument) duy nhất của `useState` là **giá trị ban đầu** của biến state của bạn. Trong ví dụ này, giá trị ban đầu của `index` được đặt thành `0` với `useState(0)`. |
| 4. And so on! | ||
| 1. **Component của bạn được render lần đầu tiên.** Bởi vì bạn đã truyền `0` cho `useState` như là giá trị ban đầu cho `index`, nó sẽ trả về `[0, setIndex]`. React nhớ rằng giá trị state mới nhất là `0`. | ||
| 2. **Bạn cập nhật state.** Khi người dùng nhấp vào nút, nó gọi `setIndex(index + 1)`. `index` là `0`, vì vậy nó là `setIndex(1)`. Điều này nói với React rằng bây giờ hãy nhớ `index` là `1` và kích hoạt một lần render khác. | ||
| 3. **Lần render thứ hai của component của bạn.** React vẫn thấy `useState(0)`, nhưng vì React *nhớ* rằng bạn đã đặt `index` thành `1`, nó trả về `[1, setIndex]` thay thế. |
There was a problem hiding this comment.
Suggested change
| 3. **Lần render thứ hai của component của bạn.** React vẫn thấy `useState(0)`, nhưng vì React *nhớ* rằng bạn đã đặt `index` thành `1`, nó trả về `[1, setIndex]` thay thế. | |
| 3. **Lần render thứ hai của component của bạn.** React vẫn thấy `useState(0)`, nhưng vì React *nhớ* rằng bạn đã đặt `index` thành `1`, nên thay vào đó nó trả về `[1, setIndex]`. |
|
|
||
| What if you wanted both galleries to keep their states in sync? The right way to do it in React is to *remove* state from child components and add it to their closest shared parent. The next few pages will focus on organizing state of a single component, but we will return to this topic in [Sharing State Between Components.](/learn/sharing-state-between-components) | ||
| Điều gì sẽ xảy ra nếu bạn muốn cả hai phòng trưng bày giữ cho các state của chúng đồng bộ? Cách đúng để làm điều đó trong React là *loại bỏ* state khỏi các component con và thêm nó vào cha gần nhất của chúng. Một vài trang tiếp theo sẽ tập trung vào việc tổ chức state của một component đơn lẻ, nhưng chúng ta sẽ trở lại chủ đề này trong [Chia Sẻ State Giữa Các Component.](/learn/sharing-state-between-components) |
There was a problem hiding this comment.
Suggested change
| Điều gì sẽ xảy ra nếu bạn muốn cả hai phòng trưng bày giữ cho các state của chúng đồng bộ? Cách đúng để làm điều đó trong React là *loại bỏ* state khỏi các component con và thêm nó vào cha gần nhất của chúng. Một vài trang tiếp theo sẽ tập trung vào việc tổ chức state của một component đơn lẻ, nhưng chúng ta sẽ trở lại chủ đề này trong [Chia Sẻ State Giữa Các Component.](/learn/sharing-state-between-components) | |
| Điều gì sẽ xảy ra nếu bạn muốn cả hai phòng trưng bày (gallery) giữ cho các state của chúng đồng bộ? Cách đúng để làm điều đó trong React là *loại bỏ* state khỏi các component con và thêm nó vào component cha gần nhất của chúng. Một vài trang tiếp theo sẽ tập trung vào việc tổ chức state của một component đơn lẻ, nhưng chúng ta sẽ trở lại chủ đề này trong [Chia Sẻ State Giữa Các Component.](/learn/sharing-state-between-components) |
| @@ -1219,13 +1219,13 @@ img { width: 120px; height: 120px; } | |||
|
|
|||
| </Sandpack> | |||
|
|
|||
| Notice how `hasPrev` and `hasNext` are used *both* for the returned JSX and inside the event handlers! This handy pattern works because event handler functions ["close over"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) any variables declared while rendering. | |||
| Chú ý cách `hasPrev` và `hasNext` được sử dụng *cả* cho JSX trả về và bên trong các hàm xử lý sự kiện! Mẫu này rất tiện dụng vì các hàm xử lý sự kiện ["nắm bắt"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) mọi biến được khai báo trong quá trình render. | |||
There was a problem hiding this comment.
Suggested change
| Chú ý cách `hasPrev` và `hasNext` được sử dụng *cả* cho JSX trả về và bên trong các hàm xử lý sự kiện! Mẫu này rất tiện dụng vì các hàm xử lý sự kiện ["nắm bắt"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) mọi biến được khai báo trong quá trình render. | |
| Chú ý cách `hasPrev` và `hasNext` được sử dụng *cho cả* JSX trả về và bên trong các hàm xử lý sự kiện! Mẫu này rất tiện dụng vì các hàm xử lý sự kiện ["nắm bắt"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) mọi biến được khai báo trong quá trình render. |
|
|
||
| <Hint> | ||
|
|
||
| Are there any limitations on _where_ Hooks may be called? Does this component break any rules? Check if there are any comments disabling the linter checks--this is where the bugs often hide! | ||
| Bạn có bất kỳ giới hạn nào về _vị trí_ mà Hooks có thể được gọi không? Component này có vi phạm quy tắc nào không? Kiểm tra xem có nhận xét nào vô hiệu hóa kiểm tra linter checks--this thường là nơi ẩn lỗi! |
There was a problem hiding this comment.
Suggested change
| Bạn có bất kỳ giới hạn nào về _vị trí_ mà Hooks có thể được gọi không? Component này có vi phạm quy tắc nào không? Kiểm tra xem có nhận xét nào vô hiệu hóa kiểm tra linter checks--this thường là nơi ẩn lỗi! | |
| Bạn có bất kỳ giới hạn nào về _vị trí_ mà Hooks có thể được gọi không? Component này có vi phạm quy tắc nào không? Kiểm tra xem có nhận xét nào vô hiệu hóa kiểm tra linter--đây thường là nơi ẩn lỗi! |
| @@ -1370,9 +1370,9 @@ export default function FeedbackForm() { | |||
|
|
|||
| <Solution> | |||
|
|
|||
| Hooks can only be called at the top level of the component function. Here, the first `isSent` definition follows this rule, but the `message` definition is nested in a condition. | |||
| Hooks chỉ được gọi ở cấp độ trên cùng của hàm component. Ở đây, định nghĩa `isSent` đầu tiên tuân theo quy tắc này, nhưng định nghĩa `message` lại được lồng trong một điều kiện. | |||
There was a problem hiding this comment.
Suggested change
| Hooks chỉ được gọi ở cấp độ trên cùng của hàm component. Ở đây, định nghĩa `isSent` đầu tiên tuân theo quy tắc này, nhưng định nghĩa `message` lại được lồng trong một điều kiện. | |
| Hooks chỉ có thể được gọi ở cấp độ trên cùng của hàm component. Ở đây, định nghĩa `isSent` đầu tiên tuân theo quy tắc này, nhưng định nghĩa `message` lại được lồng trong một điều kiện. |
|
|
||
| When the button is clicked, this example should ask for the user's name and then display an alert greeting them. You tried to use state to keep the name, but for some reason the first time it shows "Hello, !", and then "Hello, [name]!" with the previous input every time after. | ||
| Khi bạn nhấn nút, ví dụ này sẽ yêu cầu tên người dùng và sau đó hiển thị một alert chào họ. Bạn đã cố dùng state để lưu tên, nhưng vì lý do nào đó lần đầu tiên nó hiển thị "Hello, !", và sau đó mỗi lần sau lại hiện "Hello, [name]!" với giá trị nhập trước đó. |
There was a problem hiding this comment.
Suggested change
| Khi bạn nhấn nút, ví dụ này sẽ yêu cầu tên người dùng và sau đó hiển thị một alert chào họ. Bạn đã cố dùng state để lưu tên, nhưng vì lý do nào đó lần đầu tiên nó hiển thị "Hello, !", và sau đó mỗi lần sau lại hiện "Hello, [name]!" với giá trị nhập trước đó. | |
| Khi bạn nhấn nút, ví dụ này sẽ yêu cầu tên người dùng và sau đó hiển thị một thông báo để chào họ. Bạn đã cố dùng state để lưu tên, nhưng vì lý do nào đó lần đầu tiên nó hiển thị "Hello, !", và sau đó mỗi lần sau lại hiện "Hello, [name]!" với giá trị nhập trước đó. |
…from English to Vietnamese
Size changes📦 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! 🙌 |
|
Thank you @chriskhoa! I think your suggestion is better for readability. I updated based on your feedback. |
chriskhoa
approved these changes
Jun 11, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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: State: a component’s memory
Hi! I’m contributing as a volunteer translator for vi.react.dev, and this PR adds the Vietnamese translation for the “State: a component’s memory” 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:
“State: a component’s memory” → “State: Bộ Nhớ Của Component”
Các phần chính:
Phần Challenges: