「ユニークキー」の警告に固執

Question

私は現在、To-doアプリのMobxチュートリアルを採用しています。 link 私がしたいことは、各レンダリングされたリスト項目に単純なカウンタボタンを追加することです。私はこれがかなりシンプルだと考えましたが、文法上の誤りがあります。私が今直面している主なエラーは、「配列またはイテレータ内の各子には、一意の「キー」プロパティが必要です。私は、各カウンタにuuidを追加することでこの問題を解決すると考えました（カウンタが原因でエラーが表示されます）。悲しいかな、私は解決策を見つけられないようです。ここ

は、アプリのgithubのリポジトリである：https://github.com/Darthmaul/UmCount

具体this fileが最も変形を受けたものです。カウンターの店舗をそのまま維持するための "counterstore.js"ファイルも追加しました（これは失敗しているようです）。

ご協力いただければ幸いです。この時点で、私は何が間違っていて、何が正しいのか分かりません。

おかげで、

アンドリュー

Answer 1

あなたがより深くで、独自の子供、トップレベルの子供たちだけでなく、それぞれの子ではないだけを持っているかもしれませんそれぞれの子の配列を持っているコンポーネントを、持っていますレベルには独自のキーが必要です。

const Items = ({items}) => (
    <View style={{flex: 1, paddingTop: 10}}> 
    {items.map((item, i) => { 
     return (<View> 
      <Text style={styles.item} key={i}>• {item} - {store.counter}</Text> 
      <Button onPress={() => store.increment()} title="+1" color="#50EB5D" key={uuid()} /> 
      </View> 
     )}) 
    } 
    </View> 
) 

をやっての問題は、あなたのTextとButtonコンポーネントは、キーを持っているということですが、あなたのView Sにはありません。

リアクションは調整のためのキーを使用し、コンポーネントのリストが変更されるたびに最小限の変更を検出します。ここでキーを設定すると、配列が変更されたときの調整ポリシーに影響します。、TextおよびButtonは、配列要素ごとに同じキーを持つように設定できます。それぞれが別々に変更された場合は、それぞれに固有のIDを生成する必要があります。

React docs on reconciliation and keys。