Yeni Başlayanlar İçin Uygulamanızı Mahvedebilecek 3 Tepki Hatası

Bir React geliştiricisi olarak, çerçeve ile kodlama yaparken bazı hatalar yapmanız kaçınılmazdır. Bu hatalardan bazıları oldukça yaygındır. Ayrıca ince yapıları nedeniyle, uygulamanızda hata ayıklamak için bu sorunları tanımlamanız zor olabilir.

Geliştiricilerin yaptığı en yaygın üç React hatasını keşfedin. Başlangıç ​​seviyesinde, orta seviyede veya ileri seviyede bir React geliştiricisi olarak bu hataları yapabilirsiniz. Ancak onlar ve etkileri hakkında bilgi edinmek, onlardan kaçınmanıza ve bunları çözmenize yardımcı olacaktır.

1. Yanlış Türde Geri Arama İşlevini Kullanma

Olay işleme, React'te yaygın bir uygulamadır. JavaScript'in güçlü olay dinleme işlevi. Belki üzerine gelindiğinde bir düğmenin rengini değiştirmek istersiniz. Belki form verilerini gönderim sırasında sunucuya göndermek istersiniz. Bu senaryoların her ikisinde de istenen reaksiyonu gerçekleştirmek için olaya bir geri arama işlevi iletmeniz gerekir. Bazı React geliştiricilerinin hata yaptığı yer burasıdır.

Örneğin aşağıdaki bileşeni göz önünde bulundurun:

ihracatvarsayılanişlevUygulama() {
işlevişlemeGönder(e) {
 e.preventDefault()
konsol.kayıt("Form gönderildi!")
 }
işlevYazdır(sayı) {
konsol.kayıt("Yazdır", sayı)
 }
işleviki katına çıkaran(sayı) {
geri dönmek() => {
konsol.kayıt("Çift", sayı * 2)
 }
 }
geri dönmek (
 <>
 {/* Kod buraya gelecek */}
 </>
 )
}

Burada üç ayrı işleviniz var. İlk iki işlev hiçbir şey döndürmezken, üçüncüsü başka bir işlev döndürür. Bunu aklınızda tutmalısınız çünkü bundan sonra ne öğreneceğinizi anlamanın anahtarı bu olacaktır.

Şimdi, JSX'e geçelim, bir işlevi olay işleyici olarak geçirmenin ilk ve en yaygın yolu ile başlayalım:

<biçimgönderildiğinde={handleSubmit}>
<giriştip="metin"isim="metin"varsayılan değer="ilk"/>
<düğme>Göndermekdüğme>
biçim>

Bu örnek, işlevin adını onSubmit prop aracılığıyla olaya iletir, böylece formu gönderdiğinizde React, handleSubmit'i çağırır. handleSubmit içinde, aşağıdaki gibi özelliklere erişmenizi sağlayan olay nesnesine erişebilirsiniz: olay.hedef.değer ve gibi yöntemler event.preventDefault().

Bir olay işleyici işlevini geçirmenin ikinci yolu, onu geri arama işlevi içinde çağırmaktır. Esasen, onClick'te sizin için print() işlevini çağıran bir işlevi iletiyorsunuz:

{[1, 5, 7].harita((sayı) => {
geri dönmek (
 yazdır (sayı)}>
 {sayı} yazdır
 </button>
 )
})}

Bu yöntem, yerel verileri işleve aktarmak istediğiniz senaryolarda kullanışlıdır. Yukarıdaki örnek, her sayıyı print() işlevine iletir. İlk yöntemi kullandıysanız, işleve bağımsız değişkenler iletemezsiniz.

Üçüncü yöntem, birçok geliştiricinin çok fazla hata yaptığı yerdir. Doubler işlevinin başka bir işlev döndürdüğünü hatırlayın:

işleviki katına çıkaran(sayı) {
geri dönmek() => {
konsol.kayıt("Çift", sayı * 2)
 }
}

Şimdi, JSX'te şu şekilde kullandıysanız:

{[1, 5, 7].harita((sayı) => {
geri dönmek (
 katlayıcı (sayı)}>
 Çift {sayı}
 </button>
 )
})}

Bu durumda, döndürdüğünüz işlev çift() onClick'e atanan şeydir. Temelde, döndürülen işlevi kopyalayıp onClick'te satır içine yapıştırmakla aynıdır. Bu son yöntemin herhangi bir kullanım durumu yoktur. Çoğu zaman, işlevi bir değişken olarak eklemek (ilk yöntem) veya işlevi bir geri arama içinde çağırmak (ikinci yöntem) daha iyidir.

Her üç teknik de geçerlidir çünkü her durumda olaya bir işlev iletiyorsunuz. React'te, bir event özelliğine bir fonksiyon ilettiğinizden emin olmanız gerekir. Bir değişken, sabit kodlanmış bir işlev (satır içi) veya başka bir işlevi döndüren bir nesne/işlev olabilir.

2. Hatalı Bir Kontrol Sırasında Sıfır Çıktısı Verme

sen ne zaman React'te bir öğeyi koşullu olarak oluşturma, bir if...else deyimi veya kısa devre tekniği kullanabilirsiniz. Kısa devre, çift ve işaretinin (&&) kullanılmasını içerir. Ve işaretinden önceki koşul doğru olarak değerlendirilirse, tarayıcı ve işaretini izleyen kodu çalıştırır. Değilse, tarayıcı herhangi bir kod yürütmez.

Kısa devre, özlü sözdizimi sayesinde daha iyi bir tekniktir, ancak birçok geliştiricinin fark edemediği bir yan etkisi vardır. Bu hata, JSX'in sahte değerlerle nasıl çalıştığını tam olarak anlamamaktan kaynaklanmaktadır.

Aşağıdaki kodu göz önünde bulundurun:

ihracatvarsayılanişlevUygulama() {
sabit dizi = [1, 2, 3, 4]
geri dönmek (


 {dizi.uzunluk && (


Sıralamak öğeler:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Dizinin içinde bir şey olduğu sürece, React sayfadaki her öğeyi yazdıracaktır. Bunun nedeni dizi.uzunluk kontrol gerçek bir değer döndürüyor. Ancak diziniz boşsa ne olur? İlk olarak, takip eden öğeler, beklediğiniz gibi sayfada gösterilecektir. Ancak, ekranınızda tuhaf bir sıfırın belirdiğini görürsünüz.

Bunun nedeni, dizi.uzunluk sıfır döndürür. JavaScript'te sıfır değeri yanlıştır. Ve sorun, JSX'in ekranda sıfır oluşturmasıdır. null, false ve undefined gibi diğer yanlış değerler işlenmez. Bu, sayfada her zaman sıfır görüneceği için kötü bir kullanıcı deneyimine yol açabilir. Bazen sıfır o kadar küçük olabilir ki farkına bile varmazsınız.

Çözüm, yalnızca null, undefined veya false döndürdüğünüzden emin olmaktır. Bunu, sahte bir değere güvenmek yerine koşulda açıkça sıfırı kontrol ederek yaparsınız:

ihracatvarsayılanişlevUygulama() {
sabit dizi = [1, 2, 3, 4]
geri dönmek (


 {dizi.uzunluk !== 0 && (


Sıralamak öğeler:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Artık dizi boş olsa bile sıfır değeri ekranda gösterilmeyecektir.

3. Durumu Doğru Şekilde Güncelleyememek

Bir React bileşeninde durumu güncellerken, istenmeyen yan etkilerden kaçınmak için bunu düzgün bir şekilde yapmanız gerekir. En kötü hatalar, sizin için herhangi bir hata vermeyen hatalardır. Hata ayıklamayı ve sorunun ne olduğunu bulmayı zorlaştırıyorlar. Zayıf durum güncellemeleri bu etkiye sahip olma eğilimindedir.

Bu hata, mevcut durumu kullanırken durumu nasıl güncelleyeceğinizi anlamamaktan kaynaklanmaktadır. Örneğin aşağıdaki kodu göz önünde bulundurun:

ihracatvarsayılanişlevUygulama() {
sabit [dizi, setArray] = useState([1, 2, 3])
işlevAddNumberToStart() {
 dizi.unshift (sayı)
 setArray (dizi)
 }
işlevAddNumberToEnd() {
 dizi.unshift (sayı)
 setArray (dizi)
 }
geri dönmek (
 <>
 {dizi.katılma(", ")}


 onClick={() => {
 AddNumberToStart(0)
 AddNumberToEnd(0)
konsol.log (dizi)
 }}
 >
 Eklemek 0 Başlat/Bitir
 </button>
 </>
 )
}

Yukarıdaki kodu çalıştırırsanız, her iki işlevin de dizinin başına ve sonuna sıfır eklediğini fark edeceksiniz. Ancak sayfada yazdırılan diziye sıfırları eklemedi. Düğmeye tıklamaya devam edebilirsiniz, ancak kullanıcı arayüzü aynı kalır.

Bunun nedeni, her iki işlevde de durumunuzu mutasyona uğratıyor olmanızdır. dizi.push(). React, durumun React'te değişmez olması gerektiği konusunda açıkça uyarır, yani onu hiçbir şekilde değiştiremezsiniz. React, durumuyla birlikte referans değerleri kullanır.

Çözüm, geçerli duruma (currentArray) erişmek, bu durumun bir kopyasını oluşturmak ve güncellemelerinizi bu kopyada yapmaktır:

işlevAddNumberToStart(sayı) {
 diziyi ayarla((akım dizisi) => {
geri dönmek [sayı, ...currentArray]
 })
}
işlevAddNumberToStart(sayı) {
 diziyi ayarla((akım dizisi) => {
geri dönmek [...currentArray, sayı]
 })
}

Bu, React'te durumu güncellemek için doğru yöntemdir. Artık butona tıkladığınızda dizinin başına ve sonuna sıfır ekliyor. Ama en önemlisi güncellemeler anında sayfaya yansıyacaktır.

React için Diğer Önemli JavaScript Kavramları

Bu makale, React'te kod yazarken kaçınılması gereken yaygın hatalardan bazılarını ele aldı. Burada ele alınan üç hatanın tümü, JavaScript'in doğru şekilde anlaşılmamasından kaynaklanmaktadır. React bir JavaScript çerçevesi olduğundan, React ile çalışmak için sağlam bir JavaScript anlayışına ihtiyacınız olacak. Bu, React geliştirme ile en çok ilgili olan önemli kavramları öğrenmek anlamına gelir.