Skip to content
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.

Sign up for GitHub

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

Jump to bottom

translate invalid-hook-call-warning and invalid-aira-prop #200

Merged
merged 8 commits into from Sep 16, 2021
Merged

translate invalid-hook-call-warning and invalid-aira-prop #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
53550b0
Translate invalid-hook-call-warning
dinhtrung1308 Sep 15, 2021
401b17d
translate invalid-hook-call
dinhtrung1308 Sep 15, 2021
90b1ea7
Merge branch 'reactjs:main' into main
dinhtrung1308 Sep 15, 2021
a715904
translate invalid-aria-prop
dinhtrung1308 Sep 15, 2021
c6aaafa
translate invalid-hook-call-warning
dinhtrung1308 Sep 15, 2021
18b3fbf
Merge branch 'reactjs:main' into main
dinhtrung1308 Sep 15, 2021
5ba73e2
Merge branch 'reactjs:main' into main
dinhtrung1308 Sep 16, 2021
0533b4a
restranslate invalid-aria-props and invalid-hook-custom
dinhtrung1308 Sep 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions content/warnings/invalid-aria-prop.md
View file
Open in desktop
Expand Up @@ -4,8 +4,8 @@ layout: single
permalink: warnings/invalid-aria-prop.html
---

The invalid-aria-prop warning will fire if you attempt to render a DOM element with an aria-* prop that does not exist in the Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties).
The invalid-aria-prop warning sẽ xuất hiện nếu bạn cố gắng render một DOM element với một aria-* prop, nó không tồn tại trong Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties).

1. If you feel that you are using a valid prop, check the spelling carefully. `aria-labelledby` and `aria-activedescendant` are often misspelled.
1. Nếu thấy rằng mình đang sử dụng đúng prop, kiểm tra lỗi chính tả một cách kỹ càng. `aria-labelledby` và `aria-activedescendant` thường bị viết sai .

2. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered
2. React không nhận ra thuộc tính bạn mô tả. Vấn đề này có vẻ sẽ được sửa trong phiên bản tương lai của React. Tuy nhiên, React hiện tại loại bỏ tất cả thuộc tính không nhận diện được, vì thế mô tả chúng trong ứng dụng React của bạn sẽ khiến chúng không được render.
73 changes: 36 additions & 37 deletions content/warnings/invalid-hook-call-warning.md
View file
Open in desktop
Expand Up @@ -4,30 +4,29 @@ layout: single
permalink: warnings/invalid-hook-call-warning.html
---

You are probably here because you got the following error message:
Bạn có thể ở đây bởi vì bạn gặp những thông báo lỗi dưới đây:

> Hooks can only be called inside the body of a function component.
> Hooks chỉ có thể được gọi bên trong code của một function component.

There are three common reasons you might be seeing it:
Có ba nguyên nhân phổ biến bạn có thể thấy:
1. Có thể bạn đang dùng **phiên bản không trùng khớp** của React và React DOM.
2. Bạn có thể đang **vi phạm [Rules of Hooks](/docs/hooks-rules.html)**.
3. Bạn có thể đang có **một hoặc nhiều hơn bản React** trong cùng một ứng dụng.

1. You might have **mismatching versions** of React and React DOM.
2. You might be **breaking the [Rules of Hooks](/docs/hooks-rules.html)**.
3. You might have **more than one copy of React** in the same app.
Hãy nhìn vào từng trường hợp ở dưới đây.

Let's look at each of these cases.
## Phiên bản không trùng khớp của React và React DOM {#mismatching-versions-of-react-and-react-dom}

## Mismatching Versions of React and React DOM {#mismatching-versions-of-react-and-react-dom}
Bạn có thể đang sử dụng phiên bản `react-dom` (< 16.8.0) hoặc `react-native` (< 0.59) những phiên bản này chưa hỗ trợ Hooks. Bạn có thể chạy `npm ls react-dom` hoặc `npm ls react-native` trong thư mục ứng dụng của bạn để kiểm tra bạn đang sử dụng phiên bản nào. Nếu bạn thấy nhiều hơn một phiên bản, điều này sẽ gây ra những vấn đề (liệt kê bên dưới).

You might be using a version of `react-dom` (< 16.8.0) or `react-native` (< 0.59) that doesn't yet support Hooks. You can run `npm ls react-dom` or `npm ls react-native` in your application folder to check which version you're using. If you find more than one of them, this might also create problems (more on that below).
## Vi phạm những quy tắc của Hooks {#breaking-the-rules-of-hooks}

## Breaking the Rules of Hooks {#breaking-the-rules-of-hooks}
Bạn chỉ có thể gọi Hooks **trong khi React render một function component**:

You can only call Hooks **while React is rendering a function component**:
* ✅ Gọi nó ở đầu, bên trong một function component.
* ✅ Gọi nó ở đầu, bên trong một [custom Hook](/docs/hooks-custom.html).

* ✅ Call them at the top level in the body of a function component.
* ✅ Call them at the top level in the body of a [custom Hook](/docs/hooks-custom.html).

**Learn more about this in the [Rules of Hooks](/docs/hooks-rules.html).**
**Tìm hiệu thêm về điều này ở [Rules of Hooks](/docs/hooks-rules.html).**

```js{2-3,8-9}
function Counter() {
Expand All @@ -43,13 +42,13 @@ function useWindowWidth() {
}
```

To avoid confusion, it’s **not** supported to call Hooks in other cases:
Để tránh nhầm lẫn , Nó **không** được hỗ trợ để gọi Hooks trong những trường hợp:

* 🔴 Do not call Hooks in class components.
* 🔴 Do not call in event handlers.
* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or `useEffect`.
* 🔴 Đừng gọi Hooks trong class components.
* 🔴 Đừng gọi Hooks trong event handlers.
* 🔴 Đừng gọi Hooks bên trong các function được dùng trong `useMemo`, `useReducer`, hoặc `useEffect`.

If you break these rules, you might see this error.
Nếu bạn vi phạm những quy tắc trên, bạn có thể thấy lỗi này.

```js{3-4,11-12,20-21}
function Bad1() {
Expand Down Expand Up @@ -78,45 +77,45 @@ class Bad3 extends React.Component {
}
```

You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch some of these mistakes.
Bạn có thể sử dụng [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) để bắt những lỗi này.

>Note
>Ghi chú
>
>[Custom Hooks](/docs/hooks-custom.html) *may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering.
>[Custom Hooks](/docs/hooks-custom.html) *có thể* gọi những Hooks khác (hoàn toàn do mục đích của nó). Điều này hoàn toàn hữu hiệu bởi vì custom Hooks được hỗ trợ chỉ để được gọi khi một function component đang render.


## Duplicate React {#duplicate-react}
## Trùng lặp React {#duplicate-react}

In order for Hooks to work, the `react` import from your application code needs to resolve to the same module as the `react` import from inside the `react-dom` package.
Để Hooks hoạt động, `react` được import từ mã ứng dụng cần được giải quyết giống như `react` được import từ package `react-dom`.

If these `react` imports resolve to two different exports objects, you will see this warning. This may happen if you **accidentally end up with two copies** of the `react` package.
Nếu những `react` được nhập này giải quyết hai đối tượng xuất (export) khác nhau, bạn sẽ thấy cảnh báo. Điều có thể xảy ra nếu bạn **đột ngột kết thúc với hai phiên bản** của package `react`.

If you use Node for package management, you can run this check in your project folder:
Nếu bạn sử dụng Node để quản lý package, bạn có thể kiểm tra nó bằng cách chạy câu lệnh này trong thư mục dự án của bạn:

npm ls react

If you see more than one React, you'll need to figure out why this happens and fix your dependency tree. For example, maybe a library you're using incorrectly specifies `react` as a dependency (rather than a peer dependency). Until that library is fixed, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) is one possible workaround.
Nếu bạn thấy nhiều hơn một React, bạn sẽ cần tìm hiểu tại sao nó lại xảy ra và sửa cây phụ thuộc(dependency tree). Ví dụ, có lẽ một thư viện bạn đang sử dụng mô tả sai `react` như là một dependency (hơn là một peer dependency). Cho đến khi thư viện đó được sửa, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) có thể là một cách giải quyết .

You can also try to debug this problem by adding some logs and restarting your development server:
Bạn có thể tìm lỗi gây ra vấn đề này bằng cách thêm vào những logs và khởi động lại máy chủ phát triển(development server):

```js
// Add this in node_modules/react-dom/index.js
// Thêm cái này vào node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
// Thêm cái này vào component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);
```

If it prints `false` then you might have two Reacts and need to figure out why that happened. [This issue](https://github.com/facebook/react/issues/13991) includes some common reasons encountered by the community.
Nếu nó in ra `false` thì bạn có có hai Reacts và cần tìm hiểu tại sao nó lại xảy ra. [This issue](https://github.com/facebook/react/issues/13991) bao gồm những nguyên nhân phổ biến được đưa ra bởi cộng đồng.

This problem can also come up when you use `npm link` or an equivalent. In that case, your bundler might "see" two Reacts — one in application folder and one in your library folder. Assuming `myapp` and `mylib` are sibling folders, one possible fix is to run `npm link ../myapp/node_modules/react` from `mylib`. This should make the library use the application's React copy.
Vấn đề có thể xảy ra khi sử dụng `npm link` hoặc một cách tương đương nào đó. Trong trường hợp này, bundler của bạn có thể "thấy" hai Reacts — một trong thư mục ứng dụng và một trong thư mục thư viện. Giả sử `myapp` và `mylib` thư mục anh em (sibling folders), một cách có thể sửa là chạy `npm link ../myapp/node_modules/react` từ `mylib`. Diều này sẽ làm cho thư viện sử dụng bản React của ứng dụng.

>Note
>Ghi chú
>
>In general, React supports using multiple independent copies on one page (for example, if an app and a third-party widget both use it). It only breaks if `require('react')` resolves differently between the component and the `react-dom` copy it was rendered with.
>Nhìn chung, React hỗ trợ sử dụng nhiều phiên bản độc lập trong một trang (ví dụ, nếu một ứng dụng và một ứng dụng nhỏ từ bên thứ ba cùng sử dụng nó). Nó chỉ không chạy khi `require('react')` giải quyết một cách khác nhau giữa component và`react-dom` phiên bản mà nó được xuất cùng với.

## Other Causes {#other-causes}
## Những nguyên nhân khác {#other-causes}

If none of this worked, please comment in [this issue](https://github.com/facebook/react/issues/13991) and we'll try to help. Try to create a small reproducing example — you might discover the problem as you're doing it.
Nếu khó cách nào giải quyết được, Vui lòng bình luận trong [this issue](https://github.com/facebook/react/issues/13991)và chúng tôi sẽ cố gắng hỗ trợ. Hãy cố gắng tạo một ví dụ tương tự — bạn có thể tìm ra được vấn đề mà bạn mắc phải .