You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You are probably here because you got the following error message:
7
+
Anda kemungkinan berada di sini karena pesan galat berikut:
8
8
9
9
> Hooks can only be called inside the body of a function component.
10
10
11
-
There are three common reasons you might be seeing it:
11
+
Ada tiga alasan umum Anda kemungkinan mendapat pesan tersebut:
12
12
13
-
1.You might have **mismatching versions** of React and React DOM.
14
-
2.You might be **breaking the [Rules of Hooks](/docs/hooks-rules.html)**.
15
-
3.You might have**more than one copy of React**in the same app.
13
+
1.Anda kemungkinan menggunakan versi React dan React DOM yang tidak cocok.
14
+
2.Anda kemungkinan **melanggar [Aturan Hooks](/docs/hooks-rules.html)**
15
+
3.Anda kemungkinan memiliki**lebih dari satu salinan React**dalam satu aplikasi.
16
16
17
-
Let's look at each of these cases.
17
+
Mari kita liat pada tiap-tiap kasus.
18
18
19
-
## Mismatching Versions of React and React DOM {#mismatching-versions-of-react-and-react-dom}
19
+
## Versi React dan React DOM yang tidak cocok {#mismatching-versions-of-react-and-react-dom}
20
20
21
-
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).
21
+
Anda kemungkinan menggunakan versi `react-dom` (< 16.8.0) atau`react-native` (< 0.59) yang belum mendukung Hooks. Anda dapat menjalankan`npm ls react-dom`atau`npm ls react-native`pada folder aplikasi Anda untuk memeriksa versi yang sedang anda gunakan. Jika Anda menemukan lebih dari satu, kemungkinan ini dapat menyebabkan masalah (lebih detail ada pada penjelasan di bawah).
22
22
23
-
## Breaking the Rules of Hooks {#breaking-the-rules-of-hooks}
You can only call Hooks **while React is rendering a function component**:
25
+
Anda hanya dapat memanggil Hooks **saat React mer-_render_ fungsional komponen**:
26
26
27
-
* ✅ Call them at the top level in the body of a function component.
28
-
* ✅ Call them at the top level in the body of a[custom Hook](/docs/hooks-custom.html).
27
+
* ✅ Panggil pada tingkatan atas dalam badan fungsional komponen.
28
+
* ✅ Panggil pada tingkatan atas dalam badan[custom Hook](/docs/hooks-custom.html).
29
29
30
-
**Learn more about this in the [Rules of Hooks](/docs/hooks-rules.html).**
30
+
**Pelajari lebih lanjut tentang ini pada [Aturan Hooks](/docs/hooks-rules.html).**
31
31
32
32
```js{2-3,8-9}
33
33
function Counter() {
@@ -43,13 +43,13 @@ function useWindowWidth() {
43
43
}
44
44
```
45
45
46
-
To avoid confusion, it’s **not** supported to call Hooks in other cases:
46
+
Untuk menghindari kebingungan, Pemanggilan Hooks tidak didukung pada kasus-kasus berikut:
47
47
48
-
* 🔴 Do not call Hooks in class components.
49
-
* 🔴 Do not call in event handlers.
50
-
* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or`useEffect`.
48
+
* 🔴 Jangan panggil Hooks di dalam komponen berbasi kelas.
49
+
* 🔴 Jangan panggil Hooks di penangan event.
50
+
* 🔴 Jangan panggil Hooks di dalam fungsi yang dilewatkan pada `useMemo`, `useReducer`, atau`useEffect`.
51
51
52
-
If you break these rules, you might see this error.
52
+
Jika anda melanggar aturan-aturan tersebut, anda kemungkinan mendapatkan galat
53
53
54
54
```js{3-4,11-12,20-21}
55
55
function Bad1() {
@@ -78,26 +78,26 @@ class Bad3 extends React.Component {
78
78
}
79
79
```
80
80
81
-
You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)to catch some of these mistakes.
81
+
Anda dapat menggunakan [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)untuk memunculkan beberapa kesalahan di atas.
82
82
83
-
>Note
83
+
>Catatan
84
84
>
85
-
>[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.
85
+
>[Custom Hooks](/docs/hooks-custom.html)*bisa saja* memanggil Hooks lainnya (itu merupakan tujuan utama). Hal ini bekerja karena custom Hooks juga seharusnya hanya dipanggil saat fungsi komponen di-_render_.
86
86
87
87
88
-
## Duplicate React {#duplicate-react}
88
+
## React Ganda{#duplicate-react}
89
89
90
-
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.
90
+
Agar Hooks bekerja, `react`_import_ dari aplikasi Anda perlu menemukan modul yang sama dengan `react`_import_ dari dalam paket`react-dom`.
91
91
92
-
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.
92
+
Jika kedua`react`_imports_ menemukan dua _exports_ obyek yang berbeda, Anda akan melihat peringatan tersebut. Hal ini bisa saja terjadi jika Anda **secara tidak sengaja menggunakan dua salinan**dari paket`react`.
93
93
94
-
If you use Node for package management, you can run this check in your project folder:
94
+
Jika anda menggunakan _Node_ untuk pengelolaan paket, Anda dapat mejalankan perintah ini di dalam berkas proyek Anda:
95
95
96
96
npm ls react
97
97
98
-
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.
98
+
Jika anda menemukan lebih dari satu React, Anda perlu temukan kenapa hal ini terjadi dan perbaiki _dependency tree_ Anda. Contohnya, kemungkinan _library_ yang anda gunakan, menentukan `react`secara salah sebagai _dependency_ (daripada _peer dependency_). Sampai pustaka tersebut diperbaik, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)dapat menjadi salah satu solusi.
99
99
100
-
You can also try to debug this problem by adding some logs and restarting your development server:
100
+
Anda juga dapat mencoba men-_debug_ masalah ini dengan cara menambahkan beberapa _logs_ dan memuat ulang _development server_ Anda:
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.
112
+
Jika pada contoh di atas menampilkan `false`maka Anda kemungkinan memiliki dua React dan temukan kenapa hal tersebut bisa terjadi. [Permasalahan ini](https://github.com/facebook/react/issues/13991)mencakup beberapa alasan umum yang dialami komunitas.
113
113
114
-
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.
114
+
Permasalahan ini juga dapat muncul ketika menggunakan `npm link`atau semisalnya. Pada kasus tersebut, _bundler_ Anda mungkin saja "melihat" dua React — satu di dalam berkas aplikasi dan satu di dalam berkas _library_. Misalkan`myapp`dan`mylib`merupakan berkas yang sejajar, salah satu perbaikan yang memungkinkan ialah menjalankan `npm link ../myapp/node_modules/react`dari`mylib`. Hal ini seharusnya membuat _library_ menggunakan salinan aplikasi React.
115
115
116
116
>Note
117
117
>
118
-
>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.
118
+
>Secara umum, React mendukung penggunaan salinan independen ganda dalam satu halaman (Contohnya, saat sebuah aplikasi dan sebuah _third-party widget_ menggunakan yang sama). Hal tersebut hanya berhenti bekerja jika `require('react')`menemukan secara berada antara komponen dan salinan`react-dom`yang digunakan untuk me-_render_.
119
119
120
-
## Other Causes {#other-causes}
120
+
## Penyebab Lainnya {#other-causes}
121
121
122
-
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.
122
+
Jika tidak ada yang berdampak, silahkan berkomentar pada [permasalahan ini](https://github.com/facebook/react/issues/13991)dan kita akan mencoba membantu. Coba buat sebuah contoh kecil yang dapat dibuat kembali — Anda mungkin saja menemukan masalah tersebut saat melakukannya.
0 commit comments