Gebruik van State in React

Laat ons die useState funksie gebruik om 'n state te skep wat die produknaam bevat:

const state = useState('prod');

As gevolg hiervan sal die konstante state 'n skikking wees, waar die eerste element die produknaam sal bevat, en die tweede - 'n funksie om die naam te verander:

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

Vir kortheid word 'n tussentydse konstante vir die skikking gewoonlik nie gebruik nie, maar eerder destruktuurassing:

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

Laat ons nou ons state met die produknaam in 'n stukkie opmaak toon:

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

Laat ons alles bymekaar sit en die volgende kode kry:

import React, { useState } from 'react';

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

export default App;

As jy hierdie kode uitvoer, sal die aanvanklike waarde van die state eers in die div vertoon word, in ons geval 'prod'. Met die verandering van state deur die setName funksie, sal die nuwe statewaarde outomaties in die opmaak verskyn.

Gestel jy wil die gebruiker se data op die skerm vertoon: sy/haar voornaam, van en ouderdom. Skep die toepaslike states met aanvanklike waardes hiervoor.