القوائم والمفاتيح وهوية الحالة

import { useState } from "react";
function Row({ item }) { const [draft, setDraft] = useState(item.label); return <li><label>{item.id}<input value={draft} onChange={e => setDraft(e.target.value)} /></label></li>; }
export default function App() { const [items, setItems] = useState([{ id: "a", label: "Alpha" }, { id: "b", label: "Beta" }]); return <main><h1>Stable rows</h1><button type="button" onClick={() => setItems(xs => [...xs].reverse())}>Reverse</button><ul>{items.map(item => <Row key={item.id} item={item} />)}</ul></main>; }

After editing row a and reversing, its edited value stays with a.

تتبع المسودة المعرف عند الترتيب لحفظ هوية Row.

import { useState } from "react";
function Editor({ name }) { const [draft, setDraft] = useState(name); return <label>Draft<input value={draft} onChange={e => setDraft(e.target.value)} /></label>; }
export default function App() { const [id, setId] = useState("a"); return <main><h1>Record editor</h1><button type="button" onClick={() => setId(x => x === "a" ? "b" : "a")}>Switch record</button><Editor key={id} name={id === "a" ? "Alpha" : "Beta"} /></main>; }

Initial draft: Alpha. After Switch record: Beta.

ينشئ تغير المفتاح محررا جديدا ويعيد المسودة لتسمية السجل المختار.