მშობელი კომპონენტის სტეიტის ცვლილება შვილობილ კომპონენტში React-ში

წინა გაკვეთილში ჩვენი მონაცემების სტეიტი ინახებოდა მშობელ კომპონენტში, ხოლო შვილობილი კომპონენტები იღებდნენ ამ მონაცემებს პროფების სახით.

ახლა კი დავუშვათ, რომ გვსურს ჩვენი პროდუქტების შეცვლა. მაგალითად, შევქმნათ ღილაკი, რომელიც ჩვენს პროდუქტს კალათაში დაამატებს. დასაწყისისთვის მოდით ჩვენს პროდუქტების მასივში დავამატოთ ველი inCart, რომელიც აჩვენებს არის თუ არა პროდუქტი კალათაში:

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 კომპონენტში პროდუქტის ტეგს დავუმატოთ კიდევ ერთი ატრიბუტი inCart:

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>;
}

მოდით შვილობილ Product კომპონენტში გავაკეთოთ ინფორმაციის გამოტანა კალათის შესახებ და ღილაკი კალათაში დასამატებლად:

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>;
}

დავამატოთ რეალიზაცია

React-ის წესების მიხედვით კომპონენტმა არ უნდა შეცვალოს საკუთარი პროფები. ეს ნიშნავს, რომ შვილობილ კომპონენტს არ შეუძლია თავად ჩაიდოს კალათაში, inCart პროფის შეცვლით. ეს არასწორია.

სწორი იქნება, თუ მშობელ კომპონენტს ვთხოვთ, შეცვალოს საკუთარი სტეიტი prods, განსაზღვრული პროდუქტის კალათაში დამატებით.

მოდით ვნახოთ, როგორ კეთდება ეს.

მშობელ კომპონენტში შევქმნათ ფუნქცია addToCart, რომელიც პარამეტრად იღებს პროდუქტის id-ს და ამ პროდუქტისთვის ცვლის inCart თვისებას true-ზე:

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

პროდუქტის ტეგს დავუმატოთ ატრიბუტი, რომელშიც გადავცემთ ჩვენს მიერ შექმნილ ფუნქციას, ასევე ატრიბუტი, რომელშიც გადავცემთ პროდუქტის id-ს:

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

როგორც ხედავთ, კომპონენტების პროფებში შესაძლებელია გადაცემა არა მხოლოდ რაიმე მონაცემების, არამედ ფუნქციებისაც.

Products კლასის საბოლოო კოდი მიიღებს შემდეგ სახეს:

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>;
}

ახლა შვილობილ კლასში ჩვენ გვექნება ხელმისაწვდომი ფუნქცია addToCart. გამოვიძახოთ ეს ფუნქცია ღილაკზე დაწკაპუნებისას, მისთვის პარამეტრად გადავცეთ პროდუქტის id-სი:

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>;
}

მიიღება ის, რომ შვილობილში ღილაკზე დაწკაპუნებისას გამოიძახება მშობლის ფუნქცია, რომელიც შეცვლის მშობლის სტეიტს. მშობელი სტეიტის შეცვლა გამოიწვევს რერენდერინგს და გადახატავს ჩვენს პროდუქტს, მას გადაეცემა შეცვლილი პროფი.

აიღეთ კომპონენტი User წინა გაკვეთილიდან. გახადეთ ისე, რომ მასში გამოჩნდეს ღილაკი მომხმარებლის დასაბანად.