Användning av tillstånd i React

Låt oss använda funktionen useState för att skapa ett tillstånd som innehåller produktens namn:

const state = useState('prod');

Som ett resultat kommer konstanten state att representera en array, där det första elementet innehåller produktens namn, och det andra - en funktion för att ändra namnet:

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

För korthetens skull används vanligtvis inte en mellanliggande konstant för arrayen, utan använder destrukturering:

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

Låt oss nu visa vårt tillstånd med produktnamnet i någon markup:

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

Låt oss sätta ihop allt och få följande kod:

import React, { useState } from 'react';

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

export default App;

Om du kör den här koden kommer initialt div-elementet att visa tillståndets startvärde, i vårt fall 'prod'. När tillståndet ändras via funktionen setName kommer markeringen automatiskt att uppdateras med det nya värdet.

Anta att du vill visa användardata på skärmen: förnamn, efternamn, ålder. Skapa motsvarande tillstånd med initiala värden för detta.