[ Habit Treat Project ] Component error/key
3503 ワード
親コンポーネントエラー
😼 keyを提供することで問題を解決します!
mapを使用してstateにオブジェクトの値を含むliラベルごとにサブコンポーネントを作成中にエラーが発生しました.
次のエラーが発生しました.エラー文をよく確認してください.
リストには固有の
keyを使用します!こんな文が出てくる.
反応器にサブエレメントがある場合は、一意のキーが必要です。
各素子にidを1つ付与してidを同じにすると、サブ素子は変更されません.
他のサブエレメントが追加されたり、位置が変化したりしても、idをチェックすることで不要なレンダリングを阻止できます.
したがって,リストで使用されるサブコンポーネントにidを付与することが重要である.
Key
keyが何なのか、なぜそれを使用するのかを理解します.
keyはreactがどの項目を変更、追加、削除するかを識別するのに役立ちます。
keyは、要素に安定した固有性を与えるために、配列内部の要素に指定する必要があります。
render() {
const fruits = [🍓, 🍋, 🍇, 🍉, 🍒, 🍑, 🍈];
return (
<li key={fruits.toString()}>
{fruit}
</li>
))
);
}キーを選択する最善の方法は、リスト内の他のアイテム間でアイテムを一意に識別できる文字列を使用することです。従って、ほとんどのデータのIDが鍵として用いられる。
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);[整理]
1.keyは一意の番号を使用する必要があります.
2.配列を使用する場合、配列のインデックスは使用できません.
-->配列のインデックスを使用すると、配列内の要素の順序が変わり、インデックスも変わります.
鍵、値は同じオブジェクトですが、鍵が異なる場合がありますので、絶対に使用できません.
😼 1つのリストに同じidを持つ項目は絶対に存在しない.
Reference
この問題について([ Habit Treat Project ] Component error/key), 我々は、より多くの情報をここで見つけました https://velog.io/@jy777hi/Component-errorテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol