elated-hermann-05u0hq - CodeSandbox
elated-hermann-05u0hq by hdogukanozkan using react, react-dom, react-scripts
codesandbox.io
Çözüldü React clearInterval çalışmıyor
- Konuyu başlatan 249873
- Başlangıç Tarihi
- Mesaj 8
- Görüntüleme 1.466
Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
Çözüm
Öncelikle Functional Component kullanın.
Eğer index.js üzerinde <App/>, <React.StrictMode> taglari arasında ise onMount (lifecycle) hookları 2 kez çalışır.
JSX:
useEffect(() => {
// onMount
const ref = setInterval(() => {
//
}, interval);
return () => {
// onDismount
clearInterval(ref);
}
}, []);Eğer index.js üzerinde <App/>, <React.StrictMode> taglari arasında ise onMount (lifecycle) hookları 2 kez çalışır.
Hocam anladigim kadariyla clearInterval diye bir sey tanimlamissin. Bu butonla ne yapmak istiyorsun? Sayaci sifirlamak mi?Ne yaptıysam şunu durdurmayı başaramadım. Video'da gördüğümün aynısını yaptım ama video eski olduğu için çalışmıyor olabilir.elated-hermann-05u0hq - CodeSandbox
elated-hermann-05u0hq by hdogukanozkan using react, react-dom, react-scriptscodesandbox.io
Eki Görüntüle 1551369
Arastirdigima gore setInterval objesini sifirlamak icin bu fonksiyon kullaniliyor. Sen bu fonksiyonu tanimlarsan senin tanimladigina oncelik verir.
NodeJS dokumantasyonuna baktim.
clearTimeout(); ile hallettim. Su an calisiyor.
Su sekilde calisiyor:
JavaScript:
import "./styles.css";
import React from "react";
export default class App extends React.Component {
constructor() {
super();
this.state = {
mod: "yas",
count: 0
};
}
componentDidMount = () => {
this.num = 5;
this.myTimer = setInterval(() => {
this.setState({
mod: new Date().toLocaleTimeString(),
count: this.state.count + 1
});
}, 1000);
};
intervalTemizle = () => {
console.log(this.num);
console.log(this.myTimer);
clearTimeout(this.myTimer);
this.setState({
count: 0
}); // Hem setInterval objesini sifirladim, hem de count degerini 0'a esitledim. Boylece bastan basladi.
//this.state.count = 0;
};
render() {
return (
<div className="App">
<h1>{this.state.mod}</h1>
<h2>{this.state.count}</h2>
<button onClick={this.intervalTemizle}> Click Me! </button>
</div>
);
}
}
Son düzenleme:
Sifirlayacagini dusundum hocam o yuzden. Null verdim timera yine durdu ama yeniden baslatirken tekrar tanimlamak gerekiyor. clearInterval'in neden calismadigini anlayamadim.
- Katılım
- 2 Mart 2014
- Mesajlar
- 6.694
- Makaleler
- 1
- Çözümler
- 128
Öncelikle Functional Component kullanın.
Eğer index.js üzerinde <App/>, <React.StrictMode> taglari arasında ise onMount (lifecycle) hookları 2 kez çalışır.
JSX:
useEffect(() => {
// onMount
const ref = setInterval(() => {
//
}, interval);
return () => {
// onDismount
clearInterval(ref);
}
}, []);Eğer index.js üzerinde <App/>, <React.StrictMode> taglari arasında ise onMount (lifecycle) hookları 2 kez çalışır.
Telefondan göndermeye çalışıyorum ama olmuyor, gece eve geçince yardımcı olacağım.
@The Anorak hocamın attığı fonksiyonel çözümü kullanabilirsiniz. Class based çözümü gönderemiyorum sıkıntı çıkarıyor.
@The Anorak hocamın attığı fonksiyonel çözümü kullanabilirsiniz. Class based çözümü gönderemiyorum sıkıntı çıkarıyor.
Son düzenleme:
