REACT USETATE VE USEEFFECT KULLANIMI

qrivnel 353 gün önce

258 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Merhaba.
Arkadaşlar useState kullanırken anlamadığım şekilde çalışmıyor.
useEffect ile component oluşturdum. Oluşturduğum componente click eventi ekledim ve bu event ile state'imi set etmeye çalışıyorum fakat state değerim değişmiyor. Yardımcı olur musunuz nerede hata yapıyorum.

useEffect(() => {

    const divAnnouncement = document.querySelector('#divAnnouncement')

    const announcements = posts.map((post) => {
      const newHeader = document.createElement('h1')
      newHeader.innerHTML = post.post

      const newDiv = document.createElement('div');
      newDiv.style.backgroundColor = '#FFEDDA'
      newDiv.style.width = '300px'
      newDiv.style.height = '100px'
      newDiv.style.marginTop = '10px'
      newDiv.style.borderRadius = '15px'
      newDiv.style.textAlign = 'left'
      newDiv.addEventListener('click',()=>{
      setGetAnnouncement(!getAnnouncement)
      console.log(getAnnouncement);
    })
      newDiv.appendChild(newHeader)
      divAnnouncement.appendChild(newDiv)
    })

  }, [])

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (2)

devepdogukan

351 gün önce

-useEffect'in 2. parametresi bağımlılıklardır. Yani neye göre çalışacağını belirtirsin. [] boş göndermek demek component'ın sayfa içerisinde gösterildiği an 1 kere çalışacaktır.
Eğer bir state verirsen o state'ın değeri değiştiğinde tekrar çalışacaktır. (Bağımlılıkları iyi belirtmen gerekir yoksa performans sıkıntıların çıkar)
-useEffect'ın kullanım amacı bir dom elementi oluşturmak değildir. Life-cycle aşamalarını yönetmektir. Araştırsan daha iyi olur
-Bu aşamaları direkt Tayfun abinin dediği gibi Component olarak yazman gerekir.

-React içerisinde document'ı çok kullanmamaya çalış zaten amacımız domu sürekli yeniden build etmesini engellemek.
-Bir component'ın dom'daki referansına useRef ile erişebilirsin. document.querySelector vs gerek yok

#012607

tayfunerbilen

352 gün önce

neden useEffect içinde eleman oluşturmaya çalışıyorsun? posts dizini return içinde JSX ile eleman oluşturup onClick olayını o elemana vermek varken neden bu zahmet anlayamadım ben?

#012606