Çözüldü React clearInterval çalışmıyor

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

249873

Kilopat
Katılım
17 Şubat 2019
Mesajlar
5.050
Çözümler
20
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.

 
Çözüm
Öncelikle Functional Component kullanın.

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?

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:
Durdurmak istiyordum. Yazdığın koda baktım da sayaç yine durmuyor sadece sen setstate ile veriyi 0 yapmış oluyorsun.
 
Son düzenleme:
Sifirlayacagini dusundum hocam o yuzden. Null verdim timera yine durdu ama yeniden baslatirken tekrar tanimlamak gerekiyor. ClearInterval'in neden calismadigini anlayamadim.

Timeout'da çalışmıyor. 2 function arasında işlem olduğu için çalışmıyor sanırım. Ama izlediğim videoda böyle yapmışlardı.
 
Timeout'da çalışmıyor. 2 function arasında işlem olduğu için çalışmıyor sanırım. Ama izlediğim videoda böyle yapmışlardı.
Tam olarak ne yapmak istediğinizi anlatabilir misiniz? Neden class based componentler kullanıyorsunuz?
 
Tam olarak ne yapmak istediğinizi anlatabilir misiniz? Neden class based componentler kullanıyorsunuz?

Amacım Btn'a bastığımda sayacın durması.

Class neden kullandığımı bilmiyorum State'leri hep class ile yazdığım için class ile devam ettim.
 
Öncelikle Functional Component kullanın.

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.
 
Çözüm
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.
 
Son düzenleme:
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…