İkisinin arasında hiçbir fark yok
Bunun için socket programlama öğrenmelisin. Js kullanıyorsun nodejs'de socket.io var ona bakabilirsin.
Socketin mantığı ise insanları bir kanala sokuyorsun ve o kanalda veri paylaşımı yaparak her client'e dinletiyorsun.
Burada en önemli nokta inputun taşıdığı value attribute'sidir. Postlarken php kısmında name => value şeklinde gönderilir.
Silme işleminden sonra .file inputunun value'sinden aktif olan elemanı silmen gerekli
silBtn.on('click', function() {
files.splice(i,1);//silBtn click olduğunda value'nin içerisinde i nin ci index'i diziden siliyoruz
$('.file').val(files)//files'ın içinden eleman silindi ve güncel haliyle değerini güncelledik
kutu.remove();
});
Php'yi sadece api olarak kullanmadığını düşünüyorum. localStorage kullanmana gerek yok php içerisinde session ($_SESSION) kullanıp data saklayabilir ve js içerisinde istediğin datayı kullandırtabilirsin
Buradaki en güvenli durum jwt tokendır. İstersen header içerisinde gönder bu tokenı istersen httpSecure tipinde cookie oluşturup öyle gönder. Jwt token senin belirttiğin bir key ile şifrelenip sadece senin domain'den gelen istekleri kabul eder.
Dönen cevabına tam bakamamışım kusura bakma response'un direkt dizi olarak değilmiş.
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getDonem } from "../stores/DonemSlice";
const Donem = () => {
const dispatch = useDispatch();
const { donem } = useSelector((state) => state.donem);
useEffect(() => {
dispatch(getDonem());
}, []);
console.log(donem);
return (
<div className="input">
{donem?.data?.length > 0 ? (<div>Data var</div>) : (<div>Yükleniyor..</div>)}
</div>
);
};
export default Donem;
Bu bir hata değildir. Hatta olması gereken bir durum :)
Donem component'i dom'a yerleştiğinde state'ini güncelliyorsun.
State'in getDonem'i çağırmadan önce donem değişkeni verdiğin ilk initialState değerine sahip olur. Api'den cevap dönüp state'ini güncellediği zaman App'i render edip değişkenin değerini günceller
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getDonem } from "../stores/DonemSlice";
const Donem = () => {
const dispatch = useDispatch();
const { donem } = useSelector((state) => state.donem);
useEffect(() => {
dispatch(getDonem());
}, []);
console.log(donem);
return (
<div className="input">
{donem.length > 0 ? (<div>Data var</div>) : (<div>Yükleniyor..</div>)}
</div>
);
};
export default Donem;
Javascriptte objeler ve diziler değerleriyle değil ram'deki referanslarıyla temsil edilir. Yani
const a = { b:2 };
const b = a;
b ve a şuan ram'deki referansları aynı sen a veya b 'yi güncellediğinde ram'deki referansların değerini güncellemiş oluyorsun. Bu yüzden ikisinin de değeri aynı olmuş oluyor.
Çözüm 1:
Yeni bir referans numarası ile tanımlama
const a = { b:2 };
const b = { ...a };
Çözüm 2:
Objeyi json formatında tanımlama
const a = { b:2 };
const b = JSON.parse(JSON.stringify(a));
Çözüm 3:
structuredClone metodunu kullanarak tanımlama
const a = { b:2 };
const b = structuredClone(a);
cors hatasının türkçesi en basit şekilde istek atmaya çalıştığın bağlantı senin domain'ine bu bilgileri paylaşmayacağı anlamına gelir.Eğer istek atmaya çalıştığın sayfa sana aitse bu sorunu backend ile çözersin değilse hiçbir şekilde client tarafda çözemezsin
Burda yapmak istediğin şey Özyineleme (recursion) fonksiyondur. Bu fonksiyonlar ilk baktığında çok kullanışlı gibi gelsede doğru bir logic ile yazılmasa pc'ye son nefesi verdirir. Fonksiyonun yapacağı işi bittiğinde sürekli kendisini çağırmasını engellemesin yoksa dediğim gibi sonsuz döngüye girer ve bir süre sonra ram patlar