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>
		аты: <span>{name}</span>,
		баасы: <span>{cost}</span>,
		<span>{inCart ? 'себетте' : 'себетте эмес'}</span>
		<button>себетке</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>
		аты: <span>{name}</span>,
		баасы: <span>{cost}</span>,
		<span>{inCart ? 'себетте' : 'себетте эмес'}</span>
		<button onClick={() => addToCart(id)}>себетке</button>
	</div>;
}

Баскычка чыкылдоо менен баладагы функция ата-энедеги функцияны чакырат, ал ата-эненин стейтин өзгөртөт. Ата-эненин стейтинин өзгөрүшү кайрарендерингди чакырып, биздин өнүмдү өзгөргөн пропсту өткөрүп кайра сызат.

Мурунку сабактан User компонентин алыңыз. Анда колдонуучуну бан кылуу үчүн баскыч пайда болсун.