反応キーアイテム?

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">&gt;</button>
       <i className="fas fa-angle-right"></i>
     </div>
     {peedArr.map((peed, index) => {
       return <Peed peedData={peed} key={index} />;
     })}
</div>

私の場合、map関数を変換するとき、大量のデータと複雑な論理は含まれていません.
2番目のパラメータでindexを加え,sushヒューを解決した.