React state verinin geriden gelmesi

249873 · 25 Temmuz 2023

Form text ile bir veri alıyorum. ( e. Target. Value )
Bu veriyi bir function içinde X adında State'e yönlendiriyorum. Aynı function içinde başka bir y state'ine filter işlemi gerçekleştiriyorum. X'i aratıyorum. Ancak veriler geriden geliyor hatalı sonuç alıyorum. Aşağıya minik bir kod bırakıyorum.
Sorunu çözmek için searchquery State'ini hiç kullanmayıp, bunu e. Target. Value olarak yazdığımda sorunum ortadan kalkıyor. Ancak bunu öğrenmem gerek. 1 function içinde 2 farklı state verisi çakışıyor galiba. Çözebileceğim başka bir yöntem var mıdır?

JavaScript:

 const searchMovie = (e) => {
 setSearchQuery(e.target.value); //searchQuery state'i.
 setFilterMovie( // filterMovie state'i.
 movies.filter((movie) => {
 return movie.title.toLowerCase().includes(searchQuery.toLowerCase());
 })
 );
 };

--
Kendi bulduğum çözüm:

JavaScript:

 const searchMovie = (e) => {
 setFilterMovie(
 movies.filter((movie) => {
 return movie.title.toLowerCase().includes(e.target.value.toLowerCase());
 })
 );
 };

@oynozan

oynozan · 25 Temmuz 2023

Fonksiyon içerisinde state'i update ettiğiniz zaman değişken anında güncellenmez, tekrar render edilmesi gerekiyor. O yüzden state'ini değiştirdiğiniz değişkeni aynı fonksiyon içerisinde tekrar kullanmayı önermiyorum, çok kafa karıştırır. Karşılaştığınız sorunu React'ı ilk öğrenirken ben de yaşamıştım, oradan biliyorum.

249873 · 25 Temmuz 2023

Hocam başka bir Function'a yönlendirdiğimde de aynı sorun devam ediyor.

calistir() => dan önce render et diyebileceğim bir kod parçası var mı? // sorum saçma olabilir kusura bakma.

Bu arada sizi etiketliyorum ama umarım rahatsız etmiyorumdur. Cevaplarınız için teşekkürler.

oynozan · 25 Temmuz 2023

Silinen üye dedi:
Hocam başka bir Function'a yönlendirdiğimde de aynı sorun devam ediyor.

calistir() => dan önce render et diyebileceğim bir kod parçası var mı? // sorum saçma olabilir kusura bakma.

Bu arada sizi etiketliyorum ama umarım rahatsız etmiyorumdur. Cevaplarınız için teşekkürler.

Eki Görüntüle 1876579

Forumun amacı bilgi vermek zaten hocam istediğiniz kadar etiketleyebilirsiniz sorun değil.

calistir fonksiyonunu sonradan render etmek istiyorsanız useEffect kullanabilirsiniz.

JavaScript:

useEffect(() => {
    calistir()
}, [searchQuery]);

const searchMovie = e => {
    setSearchQuery(e.target.value)
}

searchQuery render olduktan sonra useEffect tarafından render edildiği anlaşılıp calistir fonksiyonu çalışacaktır. Mantıken bu şekilde.

React state verinin geriden gelmesi

249873

Kilopat

oynozan

Megapat

249873

Kilopat

oynozan

Megapat