Verwendung von States in React

Wir verwenden die Funktion useState, um einen State zu erstellen, der den Produktnamen enthält:

const state = useState('prod');

Als Ergebnis wird die Konstante state ein Array darstellen, in dessen erstem Element der Produktname gespeichert wird, und im zweiten - die Funktion zur Änderung des Namens:

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

Der Kürze halber wird normalerweise keine Zwischenkonstante für das Array verwendet, sondern Destrukturierung:

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

Lassen Sie uns nun unseren State mit dem Produktnamen in irgendeinem Markup ausgeben:

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

Fassen wir alles zusammen und erhalten folgenden Code:

import React, { useState } from 'react';

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

export default App;

Wenn Sie diesen Code ausführen, wird zunächst im Div der Anfangswert des States ausgegeben, in unserem Fall 'prod'. Bei Änderung des States über die Funktion setName erscheint in dem Markup automatisch der neue Wert des States.

Angenommen, Sie möchten Benutzerdaten auf dem Bildschirm anzeigen: seinen Vornamen, Nachnamen, Alter. Erstellen Sie dafür entsprechende States mit Anfangswerten.