私はwww.tutorialpoints.comからReactJSチュートリアルを以下だし、私はそれがJSON形式で次のデータ提供一言で言えばthis pageマップ機能はReact.jsではどのように機能しますか?
でよ:
this.state = {
data:
[
{
"id":1,
"name":"Foo",
"age":"20"
},
{
"id":2,
"name":"Bar",
"age":"30"
},
{
"id":3,
"name":"Baz",
"age":"40"
}
]
}
し、それをループさをマップ以下の機能:
{this.state.data.map((person, i) => <TableRow key = {i} data = {person} />)}
私が理解できないのはなぜ彼らはそれぞれのオブジェクトを対象とするタプル(人物、i)を使用していて、どのようにはですコードの一部が機能しています。 key
部分を削除しようとしましたが、コードはまだ動作しています。さらに読むことで、データセット全体の代わりに変更された特定のデータだけをリロードするのに役立つと理解しましたが、わかりません。
誰かがこの例のループを1行ずつ実行して、この動作の仕組みを明確にすることはできますか?
代わり 'の{this.state.data.map(/人=><のTableRowデータ= {人}>)}'私は質問に設けられたコードを使用することができ、すべてのそのロジックがあろう反応によって走る?その特定の目的のためだけに 'key'変数が予約されていますか?あなたが実際にそれを見るのが簡単な例に私を導いてもらえますか? – MiniGunnR
マップ関数に '(person、i) 'というタプルを与えていないことがわかります。それはあなたが鍵を生成する関数を持っているからですか? – MiniGunnR
はい、shortidを使用してランダムな文字列を生成します。私はリンクを追加しました。 –