@ebykdrms - Cevaplar | 𝗣𝗥𝗢𝗧𝗢𝗧𝗨𝗥𝗞

ebykdrms

Samsun

Takipçi

Takip edilen

Takip et

808 gün önce Node forEach döngüsünü kırmak sorusunu cevapladı.

stackoverflow'da sizinkine benzer bir soru sorulmuş. Kendimce biraz yorum ekleyerek paylaşıyorum:

Array.forEach döngüsünü break çağırır gibi nasıl sonlandırabilirim?

[1,2,3].forEach(function(el) {
    if(el === 1) break;
});

Bunu forEach fonksiyonunda nasıl yapabilirim? Ben return;, return:false; ve break denedim... Ama break patlıyor ve return de döngüyü sonlandırmıyor.

Doğru Cevap:

forEach içinde break ile döngüyü sonlandırma özelliği yok. Eğer for kullanamıyorsanız, ille de forEach kullanacaksanız try-catch içinde bir exception fırlatabilirsiniz.

var breakData = {};
try {
    [1, 2, 3].forEach(function(el) {
        if (el === 2) {
            breakData.data = el; // bulduğumuz veriyi breakData objesine aktaralım.
            throw breakData; // Objeyi exception (istisna) olarak fırlatalım.
        }
    });
} 
catch (e) {
    // Buraya gelindiyse ya throw breakData komutu çalışmıştır ya da başka bir hata oluşmuştur.
    // Eğer oluşan exception'da data değeri yoksa bizim oluşturduğumuz hata dışında bir hata oluşmuşsa bunu da görelim.
    if(!e.data) console.error(e);
}

// Döngü sonucu oluşan verimiz breakData objesindeki data key'inde.
console.log(breakData.data);

NOT: Kodlarda yaptığım değişikliği test etmedim. Sorun yaşarsanız direkt stackoverflow'daki örneği inceleyebilirsiniz.

Kaynak: https://stackoverflow.com/questions/2641347/short-circuit-array-foreach-like-calling-break

Sizin sorunuza gelecek olursak kodunuzu şu şekilde düzenleyebilirsiniz:

async function getData(data) {
    try {
        data.forEach(async proxy => {
            const content = await arrow(proxy);
            if(content.includes("Your file is ready")) {
                throw { success: content };
            }
        });
    }
    catch(e) {
        if(!e.success) {
            console.error("Hata oluştu", e);
            return false;
        }
        return e.success;
    }
    return undefined;
}

Ama bence forEach yerine doğrudan for kullanın.

Böylece throw veya break kullanmak zorunda kalmazsınız.

async function getData(data) {
    for(let i = 0; i < data.length; i++) {
        const proxy = data[i];
        const content = await arrow(proxy);
        if(content.includes("Your file is ready")) return content;
    }
    return null;
}

Veya döngü yerine Array.find kullanın. find, bulduğu ilk elemanı döndürür. Bulamazsa undefined döner.

find içinde hiç async fonksiyon kullanmamıştım ama denemek lazım...

async function getData(data) {
    return data.find(
        async (proxy) => (await arrow(proxy)).includes("Your file is ready")
    );
}

#010991

811 gün önce Koyu Mod Ayarları sorusunu cevapladı.

JQuery ile <link> elementinin href attribute'sini değiştirebileceğiniz bir örnek yapalım.
href değerini değiştirmek isteyeceğiniz elemente "data-style-mode" diye bir attribute verelim ki seçebilelim.

<link rel="stylesheet" href="assets/styles/light.css" data-style-mode="light" />

// Elementi jquery ile seçelim.
const $styleElement = $('[data-style-mode]');

// Mod değiştiren fonksiyon
function setStyleMode(type='light') {
    if(type=='dark') $styleElement.attr('href', 'assets/styles/dark.css').attr('data-style-mode', 'dark');
    else if(type=='light') $styleElement.attr('href', 'assets/styles/light.css').attr('data-style-mode', 'light');
}

// Modu toggle eden fonksiyon
function toggleStyleMode() {
    const currentMode = $styleElement.attr('data-style-mode');
    setStyleMode(currentMode=='light' ? 'dark' : 'light');
}

Sayfanın modunu anlık olarak güncelleyecektir. Ama sayfa yenilendiğinde veya başka bir sayfaya geçildiğinde bu ayar iptal olmuş olacak.
Kalıcılığı sağlamak için mevcut modu cookie'lere yazabilir ve sunucu taraflı bir kontrolle ilk yüklenen stil dosyasını cookie'deki stil dosyasıyla değiştirebilirsiniz.
JQuery kullanıyorsanız kolay cookie yönetimi için https://github.com/js-cookie/js-cookie projesinden faydalanabilirsiniz.
CDN için: https://cdnjs.com/libraries/js-cookie

Yok ben sunucu tarafına bu işi taşımak istemiyorum, front-end'de halledelim derseniz de localStorage'dan yardım alabilirsiniz.

<head>
    <!-- head tag'ı içerikleri -->
    
    <link rel="stylesheet" href="assets/styles/light.css" data-style-mode="light" />
    <script>
        const $styleElement = $('[data-style-mode]');
        if(localStorage.getItem('style-mode')) {
            const mode = localStorage.getItem('style-mode');
            if(mode=='dark') {
                $styleElement.attr('data-style-mode', 'dark').attr('href', 'assets/styles/dark.css');
            }
        }
    </script>
</head>
<body>
    
    <!-- body tag'ı içerikleri -->
    
    <script>
        // Mod değiştiren fonksiyon
        function setStyleMode(type='light') {
            if(type=='dark') $styleElement.attr('href', 'assets/styles/dark.css').attr('data-style-mode', 'dark');
            else if(type=='light') $styleElement.attr('href', 'assets/styles/light.css').attr('data-style-mode', 'light');
            localStorage.setItem('style-mode', type);
        }
        
        // Modu toggle eden fonksiyon
        function toggleStyleMode() {
            const currentMode = $styleElement.attr('data-style-mode');
            const targetMode = currentMode=='light' ? 'dark' : 'light';
            setStyleMode(targetMode);
            return targetMode;
        }
    </script>
</body>

#010971

823 gün önce CSS kullanarak çok dilli site yapılabilir mi sorusunu cevapladı.

@sarjaleti'nin verdiği cevaba biraz javascript eklemenizde mahzur yoksa alternatif olarak şu da mümkün:

Tüm sayfayı kapsayıcı içine alın. Sonra bu kapsayıcıyı dil sayısı kadar çoğaltın. Her kapsayıcıya da attribute olarak dili yazın.
Javascript ile body'ye aktif dili attribute olarak ekletin.
CSS ile body attribute'sine göre hangi dilin görüneceğini belirtin.

<head>
    <style>
        body > .page-content { display:none; }
        body[data-lang="tr"] > .page-content[data-lang="tr] { display:block; }
        body[data-lang="en"] > .page-content[data-lang="en] { display:block; }
        body[data-lang="es"] > .page-content[data-lang="es] { display:block; }
    </style>
    <script>
        // Dil değiştiren fonksiyon
        function changeLanguage(langCode="tr") {
            document.body.setAttribute("data-lang", langCode);
        }
        
        // Sayfa açılışında aktif olacak dili belirleyelim.
        // body elementi onload olduğunda bu veri kullanılarak changeLanguage() fonksiyonu çağırılacak.
        const startLanguage = "tr";
    </script>
</head>

<body onload="changeLanguage(startLanguage);">
    
    <div class="language-selector">
        <button onclick="changeLanguage("tr");">TR</button>
        <button onclick="changeLanguage("en");">EN</button>
        <button onclick="changeLanguage("es");">ES</button>
    </div>
    
    <section class="page-container" data-lang="tr">
        Tüm sayfanın Türkçe içerikli HTML kodu burada barınacak.
    </section>
    <section class="page-container" data-lang="en">
        Tüm sayfanın İngilizce içerikli HTML kodu burada barınacak.
    </section>
    <section class="page-container" data-lang="es">
        Tüm sayfanın İspanyolca içerikli HTML kodu burada barınacak.
    </section>
</body>

Bu kurguyu sitenizdeki tüm sayfalara uygulamalısınız. Ama bazı sorunlarla karşılaşmış olacaksınız.

Başka bir sayfaya geçtiğinizde seçtiğiniz dil kaybolacak ve ana dile ("tr") dönmüş olacaksınız.
Siteyi kapatıp tekrar açtığınızda seçtiğiniz dil kaybolacak ve yeniden dil seçmek zorunda kalacaksınız.

Bu durumda seçilen dili tarayıcıya kaydetmek ve sayfa açıldığında kayıtlı bir dil olup olmadığını kontrol edip direkt o dili aktif etmek gerekir.
Yukarıda head tag'ında bulunan script tag'ını şu şekilde değiştirebiliriz:

// Dil değiştiren fonksiyon
function changeLanguage(langCode="tr") {
    document.body.setAttribute("data-lang", langCode);
    
    // seçilen dili local storage'a kaydedelim:
    localStorage.setItem("selected-language", langCode);
}

// Daha önce local storage'a yazılmış dil verisini alalım.
const storagedLanguage = localStorage.getItem("selected-languge");

// Local storage'dan dil verisi alabildiysek bunu kullanalım. Bulamadıysak varsayılan dilimizi kullanalım.
const startLanguage = storagedLanguage ? storagedLanguage : "tr";

#010943

825 gün önce JS ile Post İşlemi sorusunu cevapladı.

2 yolla yapabilirsiniz:

1) Veriyi GET Parametresi Olarak Yollamak

Ufak bir bilgi aktarmak istiyorsanız (silindi, güncellendi gibi) a.php'deki link'inizde url parametresine bu veriyi ekleyebilir, b.php'de de yine javascript ile url'i okuyarak parametreleri alabilirsiniz.
Örn:
a.php

<a href="b.php?isim=İlker&sehir=Mersin">İsim ve Şehir verilerini gönder...</a>

b.php

// url'den gelen b.php?isim=İlker&sehir=Mersin verisini parçalayacağız...

// Url'deki parametreler kısmını alalım.
let urlParameters = window.location.search;
// Çıktı: "?isim=İlker&sehir=Mersin"

// Aldığımız veride "?" karakteri varsa bundan sonrasını alalım. Yoksa bi'şey alamayız...
urlParameters = urlParameters.includes('?') ? urlParameters.split('?')[1] : "";
// Çıktı: "isim=İlker&sehir=Mersin"

// Parametreleri birbirinden ayırarak bir array elde edelim:
urlParameters = urlParameters.split("&");
// Çıktı: ["isim=İlker", "sehir=Mersin"]

// Bir js objesinde değerleri key-value şeklinde oluşturalım.
const urlParametersObj = {};
urlParameters.map(x=>{
    const splitted = x.split("="); // "isim=İlker" -> ["isim", "İlker"]
    const key = splitted[0]; // key = "isim"
    const value = splitted.length ? splitted[1] : null; // value = "İlker"
    
    if(Array.isArray(urlParametersObs[key]) urlParametersObj[key].push(value);
    else urlParametersObj[key] = [value];
});
// Çıktı: urlParametersObj = { "isim": ["İlker"], "sehir": ["Mersin"] }

b.php'deki tüm bu işlemleri bir fonksiyon haline getirirseniz hem bu projenizde hem başka projelerinizde tekrar tekrar kullanabilirsiniz:

const getUrlParameters = function() {
    let urlParameters = window.location.search;
    urlParameters = urlParameters.includes('?') ? urlParameters.split('?')[1] : "";
    urlParameters = urlParameters.split("&");
    const urlParametersObj = {};
    urlParameters.map(x=>{
        const splitted = x.split("=");
        if(Array.isArray(urlParametersObs[splitted[0]]) urlParametersObj[splitted[0]].push(splitted.length ? splitted[1] : null);
        else urlParametersObj[splitted[0]] = [splitted.length ? splitted[1] : null];
    });
    return urlParametersObj;
}

// Kullanırken:
var urlParameters = getUrlParameters();
console.log(urlParameters); // Çıktı: { "isim": ["İlker"], "sehir": ["Mersin"] }
console.log("isim: ", urlParameters.isim[0]); // Çıktı: "İlker"
console.log(Object.keys(urlParameters)); // Çıktı: ["isim", "sehir"]
console.log(Object.values(urlParameters)); // Çıktı: [["İlker"], ["Mersin"]]
console.log(Object.entries(urlParameters)); // Çıktı: [["isim", ["İlker"]], ["sehir", ["Mersin"]]]

Burada value değerlerini dizi olarak almamızın nedeni, aynı key'den birkaç tane gelme ihtimalidir.
Örneğin şu parametreler için: ?isim=İlker&isim=Tayfun&meslek=Yazılım 2 tane isim parametresi var.
Şu sonuç üretilecek: { "isim": ["İlker", "Tayfun"], "meslek": ["Yazılım"] }

2) SessionStorage Kullanmak

Veriyi tarayıcının session storage alanına yazarsınız.

Veri, post metodunda olduğu gibi, URL'de görünmez.
Veriyi sadece sonraki sayfada değil, bundan sonra kullanıcının gezdiği her sayfada kullanabilirsiniz. Kullanıcı siteyi kapatana kadar bu veri erişiminize açık olur. Yani veri kullanıcının tarayıcısına kaydedilir.
GET parametresiyle gönderimdeki gibi belli bir formata uymanız gerekmez. İstediğiniz formattaki bir veriyi (html, json, düz yazı...) string haline getirip tutabilirsiniz.
Veriyi sadece sonraki sayfada değil, o an bulunduğunuz sayfada da kontrol edebilirsiniz.

Veriyi session storage'a yazmak için ona bir key belirlersiniz. Veriyi string olarak session storage'a yazarsınız.
Veriyi okumak için de session storage'daki key'i kullanırsınız. Eğer json gibi bir veri tuttuysanız veriyi string'ten tekrar json'a çevirmelisiniz.

Örnek:
a.php

<textarea id="gonderilecek-veri" placeholder="Tarayıcıya kaydedilecek veriyi yazın"></textarea>
<button id="gonderici-buton">Verileri tarayıcıya kaydet ve beni b.php'ye yönlendir...</button>

<script>
    const $textareaElement = document.getElementById("gonderilecek-veri");

    // Butona tıklandığında...
    document.getElementById("gonderici-buton").addEventListener("click", function(){
        
        // textarea'daki string'i al.
        const data = $textareaElement.value;
        
        // session storage'a "verilerim" key'iyle yaz.
        sessionStorage.setItem("verilerim", data);
        
    });
</script>

Diğer sayfalardan veriyi okumak için:
b.php

<div id="kayitli-veriler"></div>
<script>

    const $yazilacakElement = document.getElementById("kayitli-veriler");

    // session storage'da "verilerim" key'iyle bir kayıt var mı diye kontrol et.
    const data = sessionStorage.getItem("verilerim"); // Eğer yoksa null döner.
    
    // Eğer session storage'da "verilerim" key'iyle kayıt bulabilmişsek div'e yazdıralım.
    if(!data) $yazilacakElement.value = "Henüz veri kaydedilmemiş!";
    else $yazilacakElement.value = data;
</script>

Session storage'a sizin siteniz tarafından yazılmış veriler yalnızca sizin siteniz üzerinden okunabilir.
Yani "Ben session storage'a veri yazarsam başka bir site benim bu verilerimi okuyabilir mi?" diye endişelenmenize gerek yok.
Session storage, kullanıcı sitenizden çıktığı zaman sonlanır. Yani veri günlerce tarayıcıda saklanmaz.
Yine de bu alan kullanıcının bulup düzenleyebileceği bir alandır.
"Sayfayı İncele" > "Application" > "Session Storage" yolunu izleyerek kullanıcı bu veriyi görebilir, değiştirebilir, silebilir.
Yani şifre gibi hassas veriler burada saklanmamalıdır.

Session Storage her zaman string veri tutar. (Belki sayı da tutuyordur.)
Ama siz json veri tutmak istiyorsanız onu da string'e çevirmelisiniz.
Diyelim ki aaa adında bir js objeniz var ve bunu session storage'da saklamak istiyorsunuz:
sessionStorage.setItem("istediğim_bir_key", JSON.stringify(aaa));
Bu veriyi tekrar js objesi halinde almak için ise:
const verim = JSON.parse(sessionStorage.getItem("istediğim_bir_key"));
Veriyi storage'dan silmek istersek:
sessionStorage.removeItem("istediğim_bir_key");

Session storage'da html veri de tutabilirsiniz. Yani js ile bir html kodunu okuyup string olarak session storage'a yazarsınız.
Başka bir sayfada da bu kodu js ile ekrana basarsınız. Bir html kod bloğunu olduğu gibi başka bir sayfaya taşımış olursunuz.

NOT: Tarayıcıdan tarayıcıya farklılık gösterebilir ama Chrome için session storage'da tutabileceğiniz maksimum veri 5 mb'tır.
Eğer kullanıcının tarayıcısında session storage'da tutmaya çalıştığınız toplam veri 5mb'tan fazlaysa kullanıcı hata alır.

#010919

828 gün önce Javascript ile html etiketinin yüksekliğini otomatik yapmak sorusunu cevapladı.

Merhaba. Evet, biraz sıkıntılı bir iş otomatik yükseklik vermek. Yani ufak bir takla atmak gerekiyor.
Şöyle bir kurgu önerebilirim:

Metin sayfaya yüklendiğinde container metin yüksekliğindedir. O anda yüksekliği js yardımıyla alıp container'a attribute olarak kaydedin.
Container'a basıldığında yüksekliği 10vh, tekrar basıldığında da attribute değerini alsın.
Bu işlemleri yapan bir fonksiyon oluşturalım ki başka elementlerde veya projelerde de kullanabilelim...

<div class="container">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae amet, nostrum eligendi aliquid deleniti, et nisi ipsa nesciunt illum quidem maiores temporibus. Laboriosam recusandae quasi enim error non sequi quam.<br>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium nihil facilis consectetur vitae temporibus quis quibusdam iure qui tempore mollitia, cum voluptas reiciendis minus rem similique architecto dolores totam laborum!<br>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit ducimus cum repellat eum. Dolorem nobis, molestiae, natus cumque velit temporibus laudantium aliquam facere cum animi nesciunt sed soluta iusto. Nam.
</div>

.container {
  width:300px;
  overflow-y:hidden;
  border:1px solid #ccc;
  padding:10px;
  transition:height .5s ease 0s;
}

CSS kısmında dikkat: Elemente height değerini burada vermemeniz gerekiyor.
Çünkü javascript, elementin açıkkenki durumda yüksekliğini görebilmeli.
Elemente yükseklik değerini javascript'le vermeniz gerekiyor. Aşağıda örneği var.

function example(selector, closedHeight, openedHeight="auto", startStatus=false) {
  
  // Elementi seçip değişkene alalım.
  const $this = $(selector);
  
  // Elementin açık ve kapalı hallerinin alacağı yükseklikleri attribute olarak kaydedelim.
  $this.attr('data-orj-height', openedHeight=="auto" ? $this.outerHeight() : openedHeight);
  $this.attr('data-closed-height', closedHeight);
    
  // Container'a tıklandığında açıksa kapalı kapalıysa açık yapacak olay dinleyici:
  $this.on("click",function(){
  
    // Elementte data-opened="false" diye bir attibute varsa element kapalı haldedir. Açılsın...
    if($this.attr('data-opened')=="false") {
      $this.attr('data-opened',"true");
      $this.height($this.attr('data-orj-height'));
    }
    // Elementte data-opened="true" diye bir attibute varsa element açık haldedir. Kapatılsın...
    else {
      $this.attr('data-opened',"false");
      $this.height($this.attr('data-closed-height'));
    }
  });
  
  // Başlangıç durumu olarak kapalı olacaksa elementi kapalı hale getirelim.
  if(!startStatus) {
    $this.height(closedHeight);
    $this.attr('data-opened',"false");
  }
}

// Parametreler: 
// 1) Seçici, 
// 2) Element açık olduğunda alacağı yükseklik,
// 3) Element kapalı olduğunda alacağı yükseklik (Varsayılan:"auto")
// 4) Element başlangıçta açık olacaksa true, kapalı olacaksa false. (Varsayılan:false)
example(".container", "auto", "10vh", false);

Bu örneğin çalışan halini codepen'de oluşturdum:
https://codepen.io/ebykdrms/pen/yLKZvqX

Tabi burada container'a tıklanınca açık/kapalı toggle yapıyor ama siz bunu yapmasını istemiyor olabilirsiniz. Yani container'a değil de container'ın içindeki bir butona basınca açılıp kapanmasını istiyor da olabilirsiniz.
O zaman sadece $this.on("click",function() { yazan satırı düzenlemeniz yeterli olur.
Örn: $this.find(".close-button").on("click", function(){ gibi...

#010913

836 gün önce Append kısmında PHP çalıştırma sorusunu cevapladı.

@resat, nasıl bir sorunla karşılaştın? Mesela options değişkenini console.log(options) diyerek yazdığıp içinin nasıl dolduğuna bakabiliriz.

#010847

837 gün önce Append kısmında PHP çalıştırma sorusunu cevapladı.

JS dosyasında PHP komutu çalıştıramazsınız.
Ama PHP ile oluşturduğunuz içeriği php uzantılı dosyanızda bir js değişkenine atadıktan sonra js uzantılı dosyanızdan çağırabilirsiniz.
Örnek:
index.php

<script>
    let options = "<option></option>";
    <?php foreach ($urunsor as $cek): ?>
        options += '<option value="<?=$cek['urun_id']?>"><?=$cek['urun_ad']?> - <?=$cek['urun_renk']?></option>';
    <?php endforeach ?>
</script>
<script src="js-dosyaniz.js"></script>

js-dosyaniz.js

$(function(){
    $('#ekle').click(function(){
        $('#veriler').append($('\
            <div id="icerik" class="row">\
                <div class="col-md-4">\
                    <select name="stok_urun" id="stok_urun" class="form-select" data-search="on" required>'+options+'</select>\
                </div>\
                <div class="col-md-3">\
                    <input type="text" class="form-control mb-1" name="telefon[]" placeholder="Telefon Numaranız">\
                </div>\
                <div class="col-md-3">\
                    <input type="text" class="form-control mb-1" name="miktar[]" placeholder="Telefon Numaranız">\
                </div>\
                <div class="col-md-2"><button id="cikar" class="btn btn-light w-100">Çıkar</button></div>\
            </div>\
        '));
    });

    $('body').on('click', '#cikar', function(e){
        $(this).parents('#icerik').remove();  
        e.preventDefault();
    });
});

#010841

843 gün önce React useEffect cleanup nedir? sorusunu cevapladı.

Evet, component unmount olduğunda çalışır. Aşağıda kaynağını verdiğim sitede olay şu şekilde açıklanmış:

React useEffect cleanup: Nasıl ve ne zaman kullanılır?

useEffect(()=>{
   // effect
   return () => {
       // cleanup
   }
},[input]);

Hiç şu hatayla karşılaştınız mı?
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Mesaj, bir component unmount olup kullanılmaz hale geldikten sonra component'te bişeyler değiştirmeye çalıştığımızı söylüyor.
Bunun birçok nedeni olabilir. Ama en yaygın olarak ya bir websocket bağlantısını sonlandırmadan veya asenkron bir fonksiyon henüz sonuç dönmeden önce component'iniz unmount olmuştur.
Peki bunu nasıl çözeriz?

useEffect hook'undaki cleanup fonksiyonu

useEffect fonksiyonunda bir fonksiyon return edersek bileşenden ayrıldığımızda bu fonksiyon çalışır. Bu çok kullanışlıdır çünkü gereksiz işlemlerin yapılması veya bellek sızıntılarını önlenmesi için kullanılabilir.
websocket bağlantısının aboneliğinin iptal edildiği bir örnek:

useEffect(() => {
    API.subscribe()
    return function cleanup() {
        API.unsubscribe()
    }
});

Unmount olmuş bir bileşenin state'ini set etmeyin

Yaygın bir kullanım senaryosunda; asenkron bir fonksiyondan sonuç döndüğünde state güncellenir. Peki asenkron fonkisyon sonuç dönmeden önce component unmount olursa? Biz bu durumu kontrol etmezsek react, component unmount olsa bile state'i güncellemeye çalışır.
Aşağıdaki örnekte bir fetch isteğinden yanıt döndüğünde loading state'ini güncelliyorum.

useEffect(() => {
    fetchAPI.then(() => {
        setLoading(false)
    })
}, [])

Ama fetchAPI'nin then fonksiyonu henüz çalışmadan önce bileşen unmount olabilir ve react yine de loading state'imi güncellemeye çalışır. Bu durumda uygulama patlamasa bile react bize uyarı verir.
Basit bir kontrolle bu sorunun önüne geçebiliriz.

useEffect(() => {
    let mounted = true
    fetchAPI.then(() => {
        if (mounted) {
            setloading(false)
        }
    })

    return function cleanup() { mounted = false }
}, []);

Ekstra: Axios isteğini iptal edin

Axios, bir istek tamamlanmadan önce iptal etme seçeneğine sahiptir. Bu özellik bellek sızıntısının önüne geçmek için cleanup fonksiyonunda kullanışlıdır.

useEffect(() => {
    const source = axios.CancelToken.source()

    const fetchUsers = async () => {
        try {
            await Axios.get('/users', {
                cancelToken: source.token,
            })
            // ...
        } catch (error) {
            if (Axios.isCancel(error)) {
                console.log('Request iptal edildi.', error.message);
            } 
            else { throw error }
        }
    }

    fetchUsers()

    return () => {
        source.cancel()
    }
}, [])

Kaynak: https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm

#010808

859 gün önce Belirli checkbox ları otomatik seçtirme sorusunu cevapladı.

@thenerepe sorunuza tam olarak doğru cevap vermiş.
Siz "Peki yüzlerce checkbox varsa bunları array'dan çekebilir miyim?" diye sorunuzu genişletmişsiniz.
Evet array ile seçebilirsiniz.

const selectedValues = ["2","4"]; // Sizin seçilmiş değerlerinizi tutan diziniz. Tüm değerler string türünde olmalı.

const $button = $("button"); // butonunuzu burada seçin.
const $checkboxes = $("input[type=checkbox]"); // checkbox'larınızı burada seçin.

// Butona tıklandığında...
$button.on("click", function() {

    // Tüm checkbox'ları tek tek dön.
    for(let i=0; i < $checkboxes.length; i++) {
    
        // Eğer bu checkbox'ın value'si selectedValues dizisinde var mı?
        const status = selectedValues.includes($checkboxes.eq(i).val());
        
        // Varsa checkbox seçili olur yoksa seçilmemiş olur.
        $checkboxes.eq(i).prop("selected", status);
          
    }
});

Siz büyük ihtimalle bu verileri PHP ile javascript'e gönderiyorsunuz ki "explode edip yazsak" demişsiniz.
Şimdi "Nasıl javascript array'ını PHP ile dolduracağım?" diye soracaksanız, PHP'deki verinin elinizde ne şekilde olduğuna bakmak gerekir.
Eğer elinizdeki veri şu formattaysa: $values = ["2", "4"]; bunu json_encode() fonksiyonuyla yapabilirsiniz:

<script>
    const selectedValues = <?= json_encode($values) ?>; // Sizin seçilmiş değerlerinizi tutan diziniz.
    
    // Tüm değerlerin string olduğuna emin olmamız gerekiyor.
    selectedValues.map(function(item) { item = item.toString(); });
    
    const $button = $("button"); // butonunuzu burada seçin.
    const $checkboxes = $("input[type=checkbox]"); // checkbox'larınızı burada seçin.
    
    // Butona tıklandığında...
    $button.on("click", function() {
    
        // Tüm checkbox'ları tek tek dön.
        for(let i=0; i < $checkboxes.length; i++) {
        
            // Eğer bu checkbox'ın value'si selectedValues dizisinde var mı?
            const status = selectedValues.includes($checkboxes.eq(i).val());
            
            // Varsa checkbox seçili olur yoksa seçilmemiş olur.
            $checkboxes.eq(i).prop("selected", status);
              
        }
    });
</script>

Eğer "PHP tarafında verilerim böyle array içinde değil. Nasıl array haline getireceğim?" derseniz bu bambaşka bir soru. Verinizin ne şekilde olduğunu belirten yeni bir soru oluşturmalısınız.

#010713

859 gün önce Aynı ID'ye ait tekrar eden kayıtları listelemek MySQL sorusunu cevapladı.

SELECT id, user_id, COUNT(comments) as commentsCount
FROM tablo
GROUP BY user_id
ORDER BY commentsCount
LIMIT 1000

gibi bir sorgu işinize yarayabilir.

Pek ihtiyacım olmadığından pek de iyi bilmediğim GROUP BY kullanımına şu siteden baktım:
https://www.tasarimkodlama.com/veritabani/mysql/mysql-group-by-kullanimi/

Sitedeki MySQL GROUP BY Toplam (Aggregate) Fonksiyonlar ile Kullanımı başlığı altındaki Örnek Sorgu 2 örneğini baz aldım:
Örnek Sorgu 2 Yukarıdaki örnekte siniflara göre gruplama yaptık. Şimdi hangi sınıfta kaç öğrenci var ona bakalım. (Gruplar içinde saymak için COUNT aggregate fonksiyonu kullanılır.)

SELECT sinif, COUNT(*) as 'Mevcut'
FROM ogrenci
GROUP BY sinif

Örneği şu şekilde sonuç vermiş:

[
    { sinif: "10A", Mevcut: 15 },
    { sinif: "10B", Mevcut: 13 },
    { sinif: "10C", Mevcut: 12 },
    { sinif: "11A", Mevcut: 17 },
    { sinif: "9A", Mevcut: 14 },
    { sinif: "9B", Mevcut: 16 },
    { sinif: "9C", Mevcut: 13 },
]

#010711

Önceki Sonraki

Adı-soyadı

Emre BÜYÜKDURMUŞ
Yaşadığı yer

Samsun
Back-end bilgisi

İyi olduğumu düşünüyorum
Front-end bilgisi

Uzun süredir bu işi yapıyorum
Tasarım bilgisi

Paint terk
Meslek

Back-end Developer