Valideynin state-nin usaq komponentde deyishdirilmesi React-de

Evvelki dersde bizim data ile state valideyn komponentde saxlanilirdi, ve usaq komponentler bu datani props kimi alirdi.

Indi isteyek ki, mehsullarimizi deyishdirek. Gelin meselen, mehsulu sebetə qoyan bir duyme edek. Evvelce gelin mehsullarimizin oldugu massivə inCart sahesini elave edek, hansi ki, mehsulun sebetde olub-olmadigini gostersin:

const initProds = [
	{id: id(), name: 'product1', cost: 100, inCart: false},
	{id: id(), name: 'product2', cost: 200, inCart: false},
	{id: id(), name: 'product3', cost: 300, inCart: false},
];

Products komponentinde mehsulun oldugu teqe bir atribut inCart elave edek:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <Product
			key   ={prod.id}
			name  ={prod.name}
			cost  ={prod.cost}
			inCart={prod.inCart}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

Gelin usaq komponent Product-da sebet haqqinda melumat çixishi ve sebete elave etmek uchun duyme edek:

function Product({ id, name, cost, inCart }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>,
		<span>{inCart ? 'in cart' : 'not in cart'}</span>
		<button>to cart</button>
	</div>;
}

Elave etmeni reallashtiraq

React-in qaydalarina gore komponent oz props-larini deyishdirmemelidir. Bu omenaya gelir ki, usaq komponent ozunu sebete qoya bilmez, inCart props-unu deyishdirmekle. Bu duzgun deyil.

Duzgun olan, valideyn komponentden onun prods state-ni deyishdirmesini isteyerek, muəyyən bir mehsulu sebete qoymaqdir.

Gelin bu necə edilir baxaq.

Valideyn komponentde addToCart funksiyasi edek, hansi ki, parametr kimi mehsulun id-sini qebul edir ve bu mehsul uchun inCart xususiyyetini true olaraq deyishdirir:

function addToCart(id) {
	setProds(prods.map(prod => {
		if (prod.id === id) {
			prod.inCart = true;
		}
		
		return prod;
	}));
}

Mehsulun oldugu teqe bir atribut elave edek, hansina ki, etdiyimiz funksiyani oturecek, hemcinin id mehsulunu oturecek bir atribut da elave edek:

const items = prods.map(prod => {
	return <Product
		key      ={prod.id}
		id       ={prod.id}
		name     ={prod.name}
		cost     ={prod.cost}
		inCart   ={prod.inCart}
		addToCart={addToCart}
	/>;
});

Gorduyunuz kimi, komponentlerin props-larina yalniz bir data deyil, hem de funksiyalar oturmek olar.

Products sinfinin yekun kodu ashagidaki kimi olacaq:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	function addToCart(id) {
		setProds(prods.map(prod => {
			if (prod.id === id) {
				prod.inCart = true;
			}
			
			return prod;
		}));
	}
	
	const items = prods.map(prod => {
		return <Product
			key      ={prod.id}
			id       ={prod.id}
			name     ={prod.name}
			cost     ={prod.cost}
			inCart   ={prod.inCart}
			addToCart={addToCart}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

Indi usaq sinifde bizim addToCart funksiyasi elcatandi. Bu funksiyani duymenin kliki ile çağıraq, ona parametr kimi mehsulun id-sini oturerek:

function Product({ id, name, cost, inCart, addToCart }) {
	return <div>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>,
		<span>{inCart ? 'in cart' : 'not in cart'}</span>
		<button onClick={() => addToCart(id)}>to cart</button>
	</div>;
}

Beləliklə, usaqdakı duymə klik edende valideynin funksiyasi çağırılacaq, hansi ki, valideynin state-ni deyishdirecek. Valideyn state-inin deyishmesi yenidən renderi tetikleyecek ve mehsulumuzu deyishdirilmish props oturerek yeniden çizecek.

Evvelki dersden User komponentini goturun. Elə edin ki, orada istifadeçini ban etmek uchun bir duyme peyda olsun.