2017-12-30 39 views
1

をレンダリングリストを反応させる: 詳細には)(レンダリングの最初の道のために

const arr = [<li>{numbers[0]}</li>,<li>{numbers[0]}</li>,<li>{numbers[1]}</li>] 
 
return (
 
<ul>{arr}</ul> 
 
);

それは私が理解することができます警告が発生実行します:配列やイテレータでそれぞれの子:
警告ユニークな「鍵」支柱を持つべきです。

が、他の方法について:

return (
 
    <ul> 
 
     <li>{numbers[0]}</li> 
 
     <li>{numbers[0]}</li> 
 
     <li>{numbers[1]}</li> 
 
    </ul> 
 
);

それは、何の警告を[OK]を実行していない。..

仮想同じを生成する必要があります上記のリストをレンダリングするには、2つの方法dom.but私は最初の方法が起こるような警告なしで2番目の方法が実行される理由を理解していません。
誰かがなぜそれを伝えることができますか?ありがとう!

答えて

2

これはループの反応要件です。 https://reactjs.org/docs/lists-and-keys.html

+0

についてもっと詳しく知ることができますが、上記の2番目の方法のようにループを使用しない場合、この要件は必要ないのはなぜですか? –

+0

ループがないためです。ループ内のタグには一意のキーが必要です。 –

+0

配列ベースのリストコンポーネントにとっては本当に必要条件です。上のコードにループはありません。 –

関連する問題