სტეიტების გამოყენება React-ში

გამოვიყენოთ ფუნქცია useState პროდუქტის სახელის შემცველი სტეიტის შესაქმნელად:

const state = useState('prod');

შედეგად, კონსტანტა state იქნება მასივი, რომლის პირველ ელემენტში შეინახება პროდუქტის სახელი, ხოლო მეორეში - ფუნქცია სახელის შესაცვლელად:

const state   = useState('prod');
const name    = state[0];
const setName = state[1];

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

const [name, setName] = useState('prod');

ახლა კი გამოვსახოთ ჩვენი სტეიტი პროდუქტის სახელით რაიმე ვერსტკაში:

return <p>
	<span>{name}</span>
</p>;

შევკრიბოთ ყველაფერი ერთად და მივიღოთ შემდეგი კოდი:

import React, { useState } from 'react';

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
	</div>;
}

export default App;

თუ ამ კოდს გავუშვებთ, თავდაპირველად div-ში გამოისახება სტეიტის საწყისი მნიშვნელობა, ჩვენს შემთხვევაში 'prod'. სტეიტის შეცვლისას ფუნქციის setName მეშვეობით, ვერსტკაში ავტომატურად გამოჩნდება სტეიტის ახალი მნიშვნელობა.

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