反応キーアイテム?
key props? それは何ですか。
keyは、アイテムを変更、追加、または削除するときに反応器内部にある
このセルに安定した固有性を与えるためには、アレイ内部のセルに指定する必要がある
下の写真を見て
配列内の値を順番に生成すると、このようなエラーが頻繁に発生する可能性があります.
解決策は,生成された項目ごとにkeyと呼ばれるpropsを付与することであり,エラーが消える.
では、鍵という値はどのように割り当てるべきでしょうか.
第1に、リスト内の他の項目間で、各項目に一意に識別可能なid値を付与する
const todoItems = todos.map((todo) => {
<li key={todo.id}>
{todo.text}
</li>
});
第2に、idが付与されていない場合、リスト内の自分の位置インデックスをキーとして使用することができるconst todoItems = todos.map((todo) => {
<li key={todo.id}>
{todo.text}
</li>
});
この2つの方法では、idを各パーティションに直接割り当てることが望ましい.キーにインデックスを使用すると、パフォーマンスが低下したり、構成部品のステータスに関連する問題が発生するためです.
起こり得る.
次のコードをチェック!
<div className="main_content_left">
<div className="content_story">
{storyArr.map((story, index) => {
return <Story storyData={story} key={index} />;
})}
<button className="testgo">></button>
<i className="fas fa-angle-right"></i>
</div>
{peedArr.map((peed, index) => {
return <Peed peedData={peed} key={index} />;
})}
</div>
私の場合、map関数を変換するとき、大量のデータと複雑な論理は含まれていません.2番目のパラメータでindexを加え,sushヒューを解決した.
Reference
この問題について(反応キーアイテム?), 我々は、より多くの情報をここで見つけました https://velog.io/@93jm/리액트-key-propsテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol