[]
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>
);
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.
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
