ビルドやエミュレータの中で以下のログが出るときの話です。
Warning: Each child in a list should have a unique "key" prop.
Check the top-level render call using <dl>. See https://reactjs.org/link/warning-keys for more information.
「リストの子についてはkeyを正しく設定しないと正しく動かないんだな」と、最初はこれを
見て子要素である dt や dd に key を設定して回りました。
const Child = (_item: any) => {
return (<><dt key={`dt:${_item.id}`}>{_item.caption}</dt><dd key={`dd:${_item.id}`}>{_item.detail}</dd></>)
}
const Parent = () => {
return ["日本", "東京都", "港区", "南青山"].map((_item,_index) => {
return (<Child item={{ id: _index, caption: _item, detail: _item + 'についての説明です。' }} />)
})
}
これだと、画面書き換えに正しく対応できないんですね。前回の描画内容が残ってしまう不具合が出ました。
ここでいいたいのは、子要素「li」「dt」「dd」ではなく、親から呼び出された子コンポーネントに key を指定すること。
const Child = (_item: any) => {
return (<><dt>{_item.caption}</dt><dd>{_item.detail}</dd></>)
}
const Parent = () => {
return ["日本", "東京都", "港区", "南青山"].map((_item,_index) => {
return (<Child item={{ id: _index, caption: _item, detail: _item + 'についての説明です。' }} key={`childlist:${_index}`} />)
})
}
これで正しく解釈、処理されます。
