Skip to content

Commit 59c4446

Browse files
authored
Merge pull request #144 from emrekara37/invalid-hook-call-warning
Translate invalid-hook-call-warning.md
2 parents 6a54294 + e40e093 commit 59c4446

File tree

1 file changed

+42
-41
lines changed

1 file changed

+42
-41
lines changed
+42-41
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,68 @@
11
---
2-
title: Invalid Hook Call Warning
2+
title: Geçersiz Hook Çağrıları
33
layout: single
44
permalink: warnings/invalid-hook-call-warning.html
55
---
66

7-
You are probably here because you got the following error message:
7+
Muhtemelen aşağıdaki hatayı aldığınız için buradasınız:
88

99
> Hooks can only be called inside the body of a function component.
1010
11-
There are three common reasons you might be seeing it:
11+
3 yaygın sebebi vardır.
1212

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. React ve React DOM sürümleriniz **uyumsuz** olabilir.
14+
2. **[Hook Kuralları](/docs/hooks-rules.html)'nı çiğnemiş** olabilirsiniz.
15+
3. Aynı uygulama içerisinde **birden fazla React kopyası** mevcuttur.
1616

17-
Let's look at each of these cases.
17+
Tüm bu durumları tek tek inceleyelim.
1818

19-
## Mismatching Versions of React and React DOM {#mismatching-versions-of-react-and-react-dom}
19+
## React ve React DOM sürümlerinin uyumsuz olması {#mismatching-versions-of-react-and-react-dom}
2020

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+
Henüz Hook desteklemeyen `react-dom` (< 16.8.0) veya `react-native` (< 0.59) bir sürüm kullanıyor olabilirsiniz. Kullanılan sürümü öğrenmek için `npm ls react-dom` veya `npm ls react-native` komutlarını çalıştırabilirsiniz. Eğer birden fazla sürüm bulundu ise sorun bundan olabilir (devamı aşağıda).
2222

23-
## Breaking the Rules of Hooks {#breaking-the-rules-of-hooks}
23+
## Hook Kurallarını Çiğnemek {#breaking-the-rules-of-hooks}
2424

25-
You can only call Hooks **while React is rendering a function component**:
25+
Hook'ları yalnızca **fonksiyon bileşenlerinin içinde** kullanabilirsiniz:
2626

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+
*Hook'ları fonksiyon bileşeninin en tepesinde çağırın.
28+
*[Özel Hook'ların](/docs/hooks-custom.html) içinde de en tepede çağırın.
2929

30-
**Learn more about this in the [Rules of Hooks](/docs/hooks-rules.html).**
30+
**Bu konuya dair daha fazlasını [Hook kuralları](/docs/hooks-rules.html) bölümünde öğrenin.**
3131

3232
```js{2-3,8-9}
3333
function Counter() {
34-
// ✅ Good: top-level in a function component
34+
// ✅ İyi: fonksiyon bileşenin tepesinde çağırılmış
3535
const [count, setCount] = useState(0);
3636
// ...
3737
}
3838
3939
function useWindowWidth() {
40-
// ✅ Good: top-level in a custom Hook
40+
// ✅ İyi: özel Hook'un tepesinde çağırılmış
4141
const [width, setWidth] = useState(window.innerWidth);
4242
// ...
4343
}
4444
```
4545

46-
To avoid confusion, it’s **not** supported to call Hooks in other cases:
46+
Karışıklığı önlemek için, diğer durumlarda Hook'ları kullanmak **desteklenmez**:
4747

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+
* 🔴 Sınıf bileşenin içinde çağırmayın.
49+
* 🔴 Olay yöneticisi içinde çağırmayın.
50+
* 🔴 `useMemo`, `useReducer`, veya `useEffect` içinde Hook'ları kullanmayın
5151

52-
If you break these rules, you might see this error.
52+
Bu kuralları çiğnerseniz aşağadıki hataları görebilirsiniz.
5353

5454
```js{3-4,11-12,20-21}
5555
function Bad1() {
5656
function handleClick() {
57-
// 🔴 Bad: inside an event handler (to fix, move it outside!)
57+
// 🔴 Kötü: Olay yöneticisi içinde (düzeltmek için dışarı taşı!)
5858
const theme = useContext(ThemeContext);
5959
}
6060
// ...
6161
}
6262
6363
function Bad2() {
6464
const style = useMemo(() => {
65-
// 🔴 Bad: inside useMemo (to fix, move it outside!)
65+
// 🔴 Kötü: useMemo içinde (düzeltmek için dışarı taşı!)
6666
const theme = useContext(ThemeContext);
6767
return createStyle(theme);
6868
});
@@ -71,52 +71,53 @@ function Bad2() {
7171
7272
class Bad3 extends React.Component {
7373
render() {
74-
// 🔴 Bad: inside a class component
74+
// 🔴 Kötü: Sınıf bileşenin içinde
7575
useEffect(() => {})
7676
// ...
7777
}
7878
}
7979
```
8080

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+
[`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) eklentisini kullanarak bu hataları yakalayabilirsiniz.
8282

83-
>Note
83+
>Not
8484
>
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+
>[Özel Hook'lar](/docs/hooks-custom.html) başka Hook'ları çağıralabilir(tüm amaçları budur). Bu işe yarar, çünkü Hook'lar yalnızca bir fonksiyon bileşeni içerisindeszn çağırılabiliyordu.
8686
8787

88-
## Duplicate React {#duplicate-react}
88+
## Birden Fazla React {#duplicate-react}
8989

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+
Hook'ların çalışması için, uygulama kodunuza import ettiğiniz `react` ile `react-dom` içerisindeki `react` aynı olmalıdır.
9191

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+
Eğer bunlar farklı ise bu uyarıyı alabilirsiniz . **Yanlışlıkla 2 farklı react sürümüne ait paket kurulmuş olabilir**.
9393

94-
If you use Node for package management, you can run this check in your project folder:
94+
Paket yönetimi için node kullanıyorsanız bu komutu proje içerisinde çalıştırabilirsiniz:
9595

9696
npm ls react
9797

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+
Eğer birden fazla react sürümü görürseniz bu sorunu çözmeniz gerekmektedir. Örneğin yanlış kullandığınız bir kütüphane `React`'ı bağımlılık olarak belirtir(aynı react'ı kullanmak yerine).Bu kütüphane düzeltilinceye kadar, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) olası geçici çözümdür.
9999

100-
You can also try to debug this problem by adding some logs and restarting your development server:
100+
Ayrıca, bazı log'lar ekleyerek ve sunucuyu yeniden başlatarak bu sorunu çözmeyi deneyebilirsiniz:
101101

102102
```js
103-
// Add this in node_modules/react-dom/index.js
103+
// Bunu node_modules/react-dom/index.js dosyasına ekleyin
104104
window.React1 = require('react');
105105

106-
// Add this in your component file
106+
// Bunu bileşen dosyanıza ekleyin
107107
require('react-dom');
108108
window.React2 = require('react');
109109
console.log(window.React1 === window.React2);
110110
```
111111

112-
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+
Eğer ekrana `false` yazıyorsa iki farklı react olabilir ve bunun neden olduğunu çözmeniz gerekebilir. [Bu sorun](https://github.com/facebook/react/issues/13991), topluluğun karşılaştığı bazı genel nedenleri içerir.
113113

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+
Bu sorun, `npm link` veya eşdeğer bir komut kullandığınızda ortaya çıkabilir. Bu durumda paket yöneticiniz, biri uygulama içerisinde bir diğeri kütüphane klasörü içerisinde olmak üzere 2 farklı React görebilir.
115+
`myapp` ve `mylib` kardeş klasöler olduğu varsayılırsa olası bir düzeltme için `mylib` klasöründe `npm link` komutu çalıştırılmalıdır.Bu, kütüphanenin uygulama içerisindeki React kopyasını kullanmasını sağlar
115116

116-
>Note
117+
>Not
117118
>
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.
119+
>Genel olarak, React bir sayfada birden fazla bağımsız kopya kullanmayı destekler(örneğin bir uygulama ve üçüncü-party bir eklenti kullanıyorsa). `require('react')` sadece, bileşen içerisindeki ile `react-dom` içerisindeki sürümler farklı ise çalışmaz.
119120
120-
## Other Causes {#other-causes}
121+
## Diğer Nedenler {#other-causes}
121122

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.
123+
Bunların hiçbiri işe yaramaz ise lütfen bize [bu sorun başlığı](https://github.com/facebook/react/issues/13991) altında yorum bırakın.Size yardımcı olmaya çalışacağız.Küçük bir uygulama oluşturarak tekrar deneyebilirsiniz — belki hatayı bu şekilde bulabilirsiniz.

0 commit comments

Comments
 (0)