Funguo za Kipekee kupitia id katika React

Katika msimbo ulio hapo juu katika sifa key tuliongeza nambari ya mpangilio wa kipengele katika safu. Kweli, mazoea kama haya ni mabaya na yanapaswa kutumika tu katika hatua ya mwisho.

Jambo ni kwamba wakati wa kupanga safu, vipeo vitakuwa na funguo tofauti na React haitaweza kufuatia kwa usahihi uhusiano kati ya vipengele vya safu na vitanzi vinavyofanana.

Mazoea bora zaidi yatakuwa ya kuongeza kila bidhaa kitambulisho cha kipekee, ambacho kitatumika kama ufunguo.

Wacha katika safu yetu kila bidhaa tuongeze sifa id na nambari ya bidhaa yetu:

const prods = [
	{id: 1, name: 'product1', cost: 100},
	{id: 2, name: 'product2', cost: 200},
	{id: 3, name: 'product3', cost: 300},
];

Sasa kama ufunguo tutumie hii id:

function App() {
	const res = prods.map(function(item) {
		return <p key={item.id}>
			<span>{item.name}</span>:
			<span>{item.cost}</span>
		</p>;
	});
	
	return <div>
		{res}
	</div>;
}

Badilisha kazi iliyopita, ukiongeza kwenye safu id na ukaitumie kama thamani za sifa key.