Skip to content

done translating warnings/invalid-hook-call #126

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

Merged
merged 2 commits into from
Jul 3, 2019
Merged

done translating warnings/invalid-hook-call #126

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd2bae9
translated warnings/invalid-hook-call
mohshbool Jul 2, 2019
f4365a8
Update content/warnings/invalid-hook-call-warning.md
mohshbool Jul 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 35 additions & 34 deletions content/warnings/invalid-hook-call-warning.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,31 @@ layout: single
permalink: warnings/invalid-hook-call-warning.html
---

You are probably here because you got the following error message:
أنت على الأرجح هُنا بسبب الخطأ التالي:

> Hooks can only be called inside the body of a function component.
> Hooks can only be called inside the body of a function component. \
> يُمكن استِدعاء الخطافات فقط داخل مُكوّن دالّة.

There are three common reasons you might be seeing it:
هُناك ثلاثة أسباب شائعه لظهور الخطأ أعلاه:

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.
1. لِديك **نُسخ غير مُتوافقة** من React و React DOM.
2. قد تكون **تخرق [قواعد الخطافات](/docs/hooks-rules.html)**.
3. من المُحتمل أن يكون لديك **أكثر من نسخة React** في نفس التطبيق.

Let's look at each of these cases.
دَعنا ننظُر إلى كُل من الحالات أعلاه.

## Mismatching Versions of React and React DOM {#mismatching-versions-of-react-and-react-dom}
## نُسخ غير مُتوافقة من React و React DOM {#mismatching-versions-of-react-and-react-dom}

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).
قد تكون تستخدم نسخة `react-dom` أقل من v16.8.0 أو نُسخة `react-native` أقل من 0.59 واللَّتَانِ لا يدعمان الخطافات بعد. يُمكنك تنفيذ "run" أمر `npm ls react-dom` أو `npm ls react-native` في مُجلّد التطبيق خاصتك لمعرفة النُسخة التي تستخدمها. إن وجدت أكثر من نُسخة فقد يخلق ذلك مشاكل (المزيد على ذلك أدناه).

## Breaking the Rules of Hooks {#breaking-the-rules-of-hooks}
## خرق قواعد الخطافات {#breaking-the-rules-of-hooks}

You can only call Hooks **while React is rendering a function component**:
يُكمنك استدعاء الخظافات **رَيْثَمَا تٌصيير React مكوّن دالّة** فقط:

* ✅ 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).
* ✅ استدعيهم في المُتسوى الأعلى من بدن "body" مُكوّن الداّلة:
* ✅ استدعيهم في المُستوى الأعلى من بدن [خطاف مُخَصص](/docs/hooks-custom.html).

**Learn more about this in the [Rules of Hooks](/docs/hooks-rules.html).**
**تَعلّم المزيد عن ذلك في [قواعد الخطافات](/docs/hooks-rules.html)**

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

To avoid confusion, it’s **not** supported to call Hooks in other cases:
لِتَجنُّب الإرباك ، استدعاء الخطافات في الحالات الأُخرى **ليس** مدعومًا:

* 🔴 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`.
* 🔴 لا تَستدعِ الخطافات في مكوّنات الصنف.
* 🔴 لا تستدعِ الخطافات في مُعامِلات الأحداث "event handlers".
* 🔴 لا تستدعِ الخطافات داخل الدوال المُمَرَرة إلى `useMemo` أو `useReducer` أو `useEffect`.

If you break these rules, you might see this error.
إن خرقت تلك القواعد فمن المُمكن ان ترى هذا الخطأ.

```js{3-4,11-12,20-21}
function Bad1() {
Expand Down Expand Up @@ -78,26 +79,26 @@ 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.
يُمكنك استخدام مُلحق [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) لألتقاط بعضًا من هذه الأخطاء.

>Note
>مُلاحظة
>
>[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.
>[الخطافات المُخصّصة](/docs/hooks-custom.html) *من المُحتمل* أن تستدعي خطافات أُخرى (فذلك هو الهدف منها أساسًا). يعمل ذلك لأنه من المفروض أن الخطافات المُخصّصة تُستدعى فقط رَيْثَمَا يُصّيَّر يكون مكوّن الدالّة.


## Duplicate React {#duplicate-react}
## نُسخَتين مِن 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.
حتى تعمل الخطافات ، يجب ان يكون امر الاستيراد "import" في شيفرة التطبيق خاصّتِك يُحَلَّل "resolve" إلى نفس الواجهة "module" التي في أمر الاستيراد داخل حُزمة `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.
إن حُلِّلا أمرا استيراد `react` إلى كائنين تصدير مُختَلِفَين ، فأنك سترى هذا الخطأ. يحدث ذلك إن **كانت لديك نسختان** من حُزمة `react`.

If you use Node for package management, you can run this check in your project folder:
إن كُنت تستخدم Node لتنظيم الحُزم "package management" ، فيُكمنك تنفيذ الأمر الفحص التالي في مُجلّد المشروح خاصّتك:

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.
إن كُنت ترى أكثر من React واحدة فيجب عليك إكتشاف سبب حصول ذلك و إصلاح شًجرة الإعتماديات خاصّتك "dependency tree". فمن المُمكن أن تكون مَكتبة تَستخدِمُها تُحدد `react` كأعتمادية مُباشِرة بدلًا من تحديدها كأعتمادية نظيرة. حتى يتم إصلاح تِلك المَكتبة فأن [اقتِراحات Yarn](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) تُعتبر حلًا بديلًا.

You can also try to debug this problem by adding some logs and restarting your development server:
يُمكنك أيضًا مُعالجة هذه المُشكلة من خلال إضافة بعض السجلات "logs" و إعادة تشغيل خادِم التطوير "development server":

```js
// Add this in node_modules/react-dom/index.js
Expand All @@ -109,14 +110,14 @@ 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.
إن طُبِعَ `false` فأنّه من المُمكن أن يكون لديك اثنان من React و عليك معرفة سبب حصول ذلك. [هذه التذكره "issue"](https://github.com/facebook/react/issues/13991) تحتوي على بعض الأسباب الشائعة.

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.
هذه المُشكلة قد تظهر عند تنفيذك لأمر `npm link` أو أمرًا مشابه له. في تلك الحالة ، فأن المُجَمِّع "bundler" قد يَرى اثنان React - واحدة في مُجلّد التطبيق والأُخرى في مُجلّد المكتبة. اعتِبارًا `myapp` و `mylib` مُجلّدان إخوة (على نفس المُستوى) فقد يكون تنفيذ أمر `npm link ../myapp/node_modules/react` من `mylib` حلًا مُحتَملًا. يقوم ذلك بجعل المكتبة تستخدم نسخة React للتطبيق.

>Note
>ملاحظة
>
>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.
>غالبًا ، تدعم React استخدام نُسخ مُتعددة مُنفصة على صفحة واحدة (فمثلا، تُستَخدَم React من قِبَل كل من تطبيق وواجهة من الطرف الثالث "third-party widget"). تَحدُث المشاكل فقط عندما يُحَلَّل `require('react')` إلى نتيجة مُختلفة في المُكوّن عمّا يُحَلَّل من نُسخة `react-dom` التي يُصييرهُ.

## Other Causes {#other-causes}
## أسباب أُخرى {#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.
إن كُنت لازلت تواجه المشاكل، الرجاء ترك تعليف في [هذه التذكره](https://github.com/facebook/react/issues/13991) وسَنُحاول مُساعدَتُك. إن أمكن، حاوِل انشاء مثال لإعادة إنتاج الخطأ فقد تكتشف المُشكلة حينها.