Skip to content

feat(i18n): translate src/content/learn/state-a-components-memory.md from English to Vietnamese #472

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

KotonoSora
Copy link
Contributor

@KotonoSora KotonoSora commented Jun 2, 2025

🇻🇳 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

  • Vietnamese translation of state-a-components-memory.md
  • Preserved all code examples and markdown formatting
  • Kept terminology consistent with existing translations

Changes

  • ✅ Fully translated the guide covering React state basics and memory model
  • ✅ Maintained code blocks, links, comments and DeepDive/Solution sections
  • ✅ Verified all internal links and formatting render correctly

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:

  • “When a regular variable isn’t enough” → “Khi một biến thông thường không đủ”
  • “Meet your first Hook” → “Gặp gỡ Hook đầu tiên của bạn”
  • “Anatomy of useState” → “Giải phẫu của useState”
  • “Giving a component multiple state variables” → “Cung cấp nhiều biến state cho một component”
  • “How does React know which state to return?” → “React làm sao biết state nào để trả về?”
  • “State is isolated and private” → “State được cô lập và riêng tư”

Phần Challenges:

  • “Complete the gallery” → “Hoàn thành gallery”
  • “Fix stuck form inputs” → “Sửa lỗi form input bị kẹt”
  • “Fix a crash” → “Sửa lỗi crash”
  • “Remove unnecessary state” → “Loại bỏ state không cần thiết”

Copy link

vercel bot commented Jun 2, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
vi-legacy-reactjs-org ⬜️ Ignored (Inspect) Visit Preview Jun 2, 2025 4:05am

Copy link
Collaborator

@chriskhoa chriskhoa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the contribution. Please check the suggestions!

@@ -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ị:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 `[` `]` ở đâ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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
> Cú pháp `[``]` ở đâ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 `[``]` ở đâ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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)`.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Tham số duy nhất của `useState`**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`**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ế.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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` `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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Chú ý cách `hasPrev``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``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!
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 đó.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 đó.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants