React setState geri araması ne zaman kullanılır?

Bir reaksiyon bileşeni durumu değiştiğinde, render yöntemi çağrılır. Dolayısıyla, herhangi bir durum değişikliği için, oluşturma yöntemleri gövdesinde bir eylem gerçekleştirilebilir. O zaman setState geri araması için özel bir kullanım durumu var mı?

Evet var, çünkü setStatebir asynchronousşekilde çalışıyor . Bu setState, this.statedeğişken çağrıldıktan sonra hemen değiştirilmediği anlamına gelir . bir durum değişkeninde durumu ayarladıktan hemen sonra bir eylem gerçekleştirmek ve ardından bir sonuç döndürmek istiyorsanız, geri arama yararlı olacaktır

Aşağıdaki örneği düşünün

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value });
  this.validateTitle();
},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

Yukarıdaki kod beklendiği gibi çalışmayabilir, çünkü titledeğişken üzerinde doğrulama yapılmadan önce mutasyona uğramamış olabilir. Şimdi, render()işlevin kendisinde doğrulama gerçekleştirebileceğimizi merak edebilirsiniz, ancak bunu changeTitle işlevinde halledebilmemiz daha iyi ve daha temiz bir yol olurdu, çünkü bu kodunuzu daha organize ve anlaşılır hale getirecektir.

Bu durumda geri arama yararlıdır

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value }, function() {
    this.validateTitle();
  });

},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

Başka bir örnek dispatch, durum değiştiğinde ve eylemde bulunmak olacaktır . bunu render()her yeniden oluşturma gerçekleştiğinde çağrılacak şekilde değil, bir geri aramada yapmak isteyeceksiniz ve bu nedenle geri aramaya ihtiyaç duyacağınız birçok senaryo mümkündür.

Başka bir dava API Call

Belirli bir durum değişikliğine dayalı bir API çağrısı yapmanız gerektiğinde, oluşturma yönteminde bunu yaparsanız, her oluşturma onStatedeğişikliğinde veya bazı Prop Child Componentdeğiştirilene geçtiği için çağrılabilir .

Bu durumda setState callback, güncellenmiş durum değerini API çağrısına iletmek için a kullanmak istersiniz.

....
changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
  // Call API with the updated value
}
....

this.setState({
    name:'value' 
},() => {
    console.log(this.state.name);
});

Aklıma gelen 1. apiusecase, render işlemine girmemesi gereken bir çağrıdır, çünkü eachdurum değişikliği için çalışacaktır . Ve API çağrısı her renderde değil, sadece özel durum değişikliğinde yapılmalıdır .

changeSearchParams = (params) => {
  this.setState({ params }, this.performSearch)
} 

performSearch = () => {
  API.search(this.state.params, (result) => {
    this.setState({ result })
  });
}

Dolayısıyla, herhangi bir durum değişikliği için, oluşturma yöntemleri gövdesinde bir eylem gerçekleştirilebilir.

Çok kötü uygulama , çünkü render-method saf olmalı, hiçbir eylem, durum değişikliği, api çağrısı yapılmamalıdır, sadece görüşünüzü birleştirin ve geri gönderin. Eylemler yalnızca bazı etkinliklerde gerçekleştirilmelidir. Oluşturma bir olay değil componentDidMount, örneğin.

SetState çağrısını düşünün

this.setState({ counter: this.state.counter + 1 })

IDEA

async işlevinde setState çağrılabilir

Yani güvenemezsin this. Yukarıdaki çağrı bir thiszaman uyumsuzluk işlevi içinde yapıldıysa , o anda bileşenin durumuna atıfta bulunacak, ancak bunun setState çağrısı veya zaman uyumsuz görev başlangıcındaki durum içindeki özelliğe başvurmasını bekledik. Ve görev eşzamansız çağrı olarak bu özellik zaman içinde değişmiş olabilir. Bu nedenle this, durumun bazı özelliklerine başvurmak için anahtar kelime kullanmak güvenilir değildir, bu nedenle argümanları previousState ve props olan geri çağırma işlevini kullanırız, bu da zaman uyumsuz görev yapıldığında ve setState çağrısı kullanarak durumu güncelleme zamanı geldi henüz başlamadı. NextState'in bozulmaması için güvenilirlik sağlamak.

Yanlış Kod: verilerin bozulmasına neden olur

this.setState(
   {counter:this.state.counter+1}
 );

Geri arama işlevine sahip setState ile Doğru Kod:

 this.setState(
       (prevState,props)=>{
           return {counter:prevState.counter+1};
        }
    );

Bu nedenle, şimdiki durumumuzu şu anda mülkün sahip olduğu değere göre bir sonraki duruma güncellememiz gerektiğinde ve tüm bunlar zaman uyumsuz bir şekilde gerçekleşiyorsa setState'i geri arama işlevi olarak kullanmak iyi bir fikirdir.

Ben burada codepen açıklamaya çalıştım KOD KALEM