[]

Buradaki react kodunun işlevini anlayamıyorum, yardım eder misiniz

Aşağıdaki kodda, map metodunu neden setPopular'a değil de popular state'ine uyguladığımızı bir türlü anlayamıyorum. Biz verimizi setPopular'a çekmiyor muyuz? Nasıl oluyor da setPopular'a attığımız veri, popular'dan ulaşılabilir hâle geliyor?

Movie componentımda sadece bir h2 tagi var, bu fonksiyonla api'deki 20 objenin de title'ını yazdırabilmem tuhafıma gitti.

Biriniz açıklayabilirse, çok sevinirim. :)



Fotoğraftan bir şey anlaşılmıyorsa kodlarım böyle:


import './App.css';
import {useEffect, useState} from "react";
import Movie from "./Movie"

function App() {

const [popular, setPopular] = useState([]);

useEffect(() =>{
fetchPopular();
}, []);

const fetchPopular = async () => {
const data = await fetch( https*)
const movies = await data.json();
setPopular(movies.results)
}
return (
<div className="App">
<div className='popular-movies'>
{popular.map((movie) => {
return <Movie />
})}

</div>
</div>
);

 
React'ın olayı reactive olması biliyorsun.

Yani bir değişken değiştiğinde, anında ekranda değişiklikleri görebiliyorsun.

Normalde JS içinde bi değişkenin değişip değişmediğini anlamanın kolay bir yolu yok. Değişken dediğin memory'de bi yer, her salise gidip teker teker bütün memory'i kontrol edip, önceki state'i başka bi yerde tutup, değişiklik varsa ekran tekrar render et falan gibi yapsan inanılmaz zor ve maliyetli olur.

Bunun yerine React (useState hook'u aracılığıyla) şöyle bişey yapıyor, değişkenlerin hepsi "immutable". Yani değişkene yeni bir değer atayamıyorsun direkt. Ama her değişken için sana başka bir fonksiyon veriyor, o fonksiyonu çağırdığın zaman, o fonksiyona verdiğin değeri değişkenin içerisine kendisi yazıyor. Bu sayede arka planda hangi değişkenlerin değeri değiştiğini de biliyor, çünkü set.... fonksiyonunun içinde o kod da var, bakıyor değer değişmiş, tekrar render et falan manuel işlemleri yapıyor.

Yani, "popular", değişkenin adı. O değişkene direkt yeni değer atayamazsın. "setPopular" da "popular" değişkeninin değerini değiştirmek için kullandığın fonksiyon, değişkenin kendisi değil.

Direkt değişkene değer atamak yerine niye bir fonksiyon kullanıyoruz? Üstte anlattığım şeyler, reactive olması, değişiklikleri kolay tespit edip ekrana hemen render edebilmek için.
  • plutongezegendegilmi  (17.09.22 09:55:12 ~ 09:56:03) 
1
buraya yazılanların hakları Sir Anthony Hopkins'e aittir.
yazan eden compumaster, ilgilenen eden fader
modere edenler angelus, Artibir, aychovsky, baba jo, basond, compumaster, deckard, duyulmasi gerektigi kadar, fader, fraise, groove salad, kahvegibi, kaymaktutmayansicaksut, kibritsuyu, monstro, pandispanya, robin, ron dennis
bu sitede yazılanların hiçbiri doğru değildir. site içeriği küçükler için sakıncalı olabilir. yazılardan yazarları sorumludur. kaynak göstermeden alıntılanamaz. devlet tarafından atanmış bir kurumun internet üzerinde kimin hangi bilgiye ulaşıp ulaşamayacağına karar vermesi insan haklarına aykırıdır. web siteleri kullanıcıların istekleri doğrultusunda bağlandıkları yerlerdir. kullanıcılar isterlerse bir web sitesine bağlanmayabilirler. bu güçleri ve imkanları mevcuttur. bir kullanıcı bir siteye bağlanmak istiyorsa bu onun tercihi ve hakkıdır. bağlanmak istemiyorsa bu yine onun tercihi ve hakkıdır. halkın kendisine hizmet etmesi için görevlendirdiği kurumlar hadlerini aşıp halka neye ulaşıp ulaşmayacağını bilmeyen cahil cühela muamelesi edemezler. ebeveynlerin çocuklarını sakıncalı içeriklerden koruması için çok sayıda bedava ve ücretli yazılım mevcuttur. bu yazılımlar bir web tarayıcısını kullanmaktan daha karmaşık teknik bilgi gerektirmemektedir. devletin milletini küçük düşürmesi ve ebleh yerine koyması yasaktır. Skimlinks ile linkler üzerinden yönlendirme payı alınmaktadır.