[解決済み] 基本的なFlatListのコードで警告を投げる - React Native
2022-04-25 18:56:56
質問
FlatListが動作していないようです。このような警告が表示されます。
VirtualizedList: 項目のキーがありません。各項目に必ずキー・プロパティを指定するか、カスタムの keyExtractor を提供してください。
コード
<FlatList
data={[{name: 'a'}, {name: 'b'}]}
renderItem={
(item) => <Text key={Math.random().toString()}>{item.name}</Text>
}
key={Math.random().toString()} />
解決方法は?
単純にこうすればいい。
<FlatList
data={[{name: 'a'}, {name: 'b'}]}
renderItem={
({item}) => <Text>{item.name}</Text>
}
keyExtractor={(item, index) => index.toString()}
/>
出典 こちら
関連
-
React-NativeにおけるイベントリスナーDeviceEventEmitter
-
[解決済み] React NativeとReactの違いは何ですか?
-
[解決済み] React / React Nativeでコンストラクタを使用する場合とgetInitialStateを使用する場合の違いとは何ですか?
-
[解決済み] react-nativeでキーボードを隠す
-
[解決済み】react-nativeで環境変数を設定する?
-
[解決済み】react nativeでボタンを無効化する。
-
[解決済み] 基本的なFlatListのコードで警告を投げる - React Native
-
[解決済み] CocoaPods は、ポッド "ReactCommon/jscallinvoker" の互換性のあるバージョンを見つけられませんでした。
-
[解決済み] エミュレータ上でreact nativeプロジェクトを実行する際のspawnSync ./gradlew EACCESエラー udara
-
[解決済み] react-native run-ios` は、Error を返します。iPhone X シミュレータが見つかりません
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
React-NativeにおけるイベントリスナーDeviceEventEmitter
-
[解決済み】react nativeでボタンを無効化する。
-
[解決済み] 基本的なFlatListのコードで警告を投げる - React Native
-
[解決済み] React Nativeで<Text>フィールドの単一単語を太字または斜体にする
-
[解決済み] react nativeでパスワード入力用のTextInputをスタイルする方法
-
[解決済み] React Nativeで水平罫線を描く
-
[解決済み] エミュレータ上でreact nativeプロジェクトを実行する際のspawnSync ./gradlew EACCESエラー udara
-
[解決済み] react nativeでテキストを縦書き(90度回転)させるには?
-
[解決済み] 数字しか受け付けないReact NativeのTextInput
-
[解決済み] React Nativeでデフォルトのフォントファミリーを設定するには?