Reaktives Hinzufügen zu einem Array von Objekten in React

Lassen Sie uns nun die Reaktivität eines Arrays von Objekten studieren. In diesem Fall müssen wir alle Änderungen vornehmen, indem wir auf die Elemente über deren id zugreifen, die in den Objekten selbst gespeichert sind.

Lassen Sie es uns versuchen. Nehmen wir an, wir haben das folgende Array von Objekten:

const initNotes = [
	{
		id: 'GYi9G_uC4gBF1e2SixDvu',
		prop1: 'value11',
		prop2: 'value12',
		prop3: 'value13',
	},
	{
		id: 'IWSpfBPSV3SXgRF87uO74',
		prop1: 'value21',
		prop2: 'value22',
		prop3: 'value23',
	},
	{
		id: 'JAmjRlfQT8rLTm5tG2m1L',
		prop1: 'value31',
		prop2: 'value32',
		prop3: 'value33',
	},
];

Lassen Sie uns jedes Element unseres Arrays in einem separaten li-Tag ausgeben:

function App() {
	const [notes, setNotes] = useState(initNotes);
	
	const result = notes.map(note => {
		return <li key={note.id}>
			<span>{note.prop1}</span>
			<span>{note.prop2}</span>
			<span>{note.prop3}</span>
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

Erstellen Sie einen Button, bei dessen Klick ein neues Element am Ende des Arrays hinzugefügt wird, was wiederum ein neues li am Ende des ul-Tags hinzufügt.

Erstellen Sie drei Inputs und einen Button. Bei Klick auf den Button erstellen Sie aus den Input-Daten ein neues li am Ende des ul-Tags.