私はアプリを作りましたリアクトネイティブiOSとAndroidの両方でListView有効なデータソースを使用してリストビューを入力すると、画面の下部に次の警告が表示されます。
警告: 配列または反復子の各子には、一意の「key」プロパティが必要です。 のレンダリング メソッドを確認してください
ListView。
この警告の目的は何ですか？リンク先のメッセージの後このページここでは、React Native とはまったく関係のない、Web ベースの reactjs に関するまったく異なる事柄が議論されています。
私の ListView は次のステートメントで構築されています:
render() {
var store = this.props.store;
return (
<ListView
dataSource={this.state.dataSource}
renderHeader={this.renderHeader.bind(this)}
renderRow={this.renderDetailItem.bind(this)}
renderSeparator={this.renderSeparator.bind(this)}
style={styles.listView}
/>
);
}
私のデータソースは次のようなもので構成されています:
var detailItems = [];
detailItems.push( new DetailItem('plain', store.address) );
detailItems.push( new DetailItem('map', '') );
if(store.telefon) {
detailItems.push( new DetailItem('contact', store.telefon, 'Anrufen', 'fontawesome|phone') );
}
if(store.email) {
detailItems.push( new DetailItem('contact', store.email, 'Email', 'fontawesome|envelope') );
}
detailItems.push( new DetailItem('moreInfo', '') );
this.setState({
dataSource: this.state.dataSource.cloneWithRows(detailItems)
});
ListView 行は次のような内容でレンダリングされます。
return (
<TouchableHighlight underlayColor='#dddddd'>
<View style={styles.infoRow}>
<Icon
name={item.icon}
size={30}
color='gray'
style={styles.contactIcon}
/>
<View style={{ flex: 1}}>
<Text style={styles.headline}>{item.headline}</Text>
<Text style={styles.details}>{item.text}</Text>
</View>
<View style={styles.separator}/>
</View>
</TouchableHighlight>
);
私にとってはまったく意味不明な警告を除いて、すべて正常に期待どおりに動作します。
「DetailItem」クラスにキー プロパティを追加しても問題は解決しませんでした。
これは、「cloneWithRows」の結果として実際に ListView に渡されるものです。
_dataBlob:
I/ReactNativeJS( 1293): { s1:
I/ReactNativeJS( 1293): [ { key: 2,
I/ReactNativeJS( 1293): type: 'plain',
I/ReactNativeJS( 1293): text: 'xxxxxxxxxx',
I/ReactNativeJS( 1293): headline: '',
I/ReactNativeJS( 1293): icon: '' },
I/ReactNativeJS( 1293): { key: 3, type: 'map', text: '', headline: '', icon: '' },
I/ReactNativeJS( 1293): { key: 4,
I/ReactNativeJS( 1293): type: 'contact',
I/ReactNativeJS( 1293): text: '(xxxx) yyyyyy',
I/ReactNativeJS( 1293): headline: 'Anrufen',
I/ReactNativeJS( 1293): icon: 'fontawesome|phone' },
I/ReactNativeJS( 1293): { key: 5,
I/ReactNativeJS( 1293): type: 'contact',
I/ReactNativeJS( 1293): text: '[email protected]',
I/ReactNativeJS( 1293): headline: 'Email',
I/ReactNativeJS( 1293): icon: 'fontawesome|envelope' },
I/ReactNativeJS( 1293): { key: 6, type: 'moreInfo', text: '', headline: '', icon: '' } ] },
1 つのキーを見るとわかるように、各レコードにはキー プロパティがあります。警告は引き続き存在します。
ベストアンサー1
私が持っていましたその通りしばらくの間、あなたと同じ問題を抱えていましたが、上記の提案のいくつかを見た後、ようやく問題を解決しました。
結局のところ (少なくとも私にとっては)、renderSeparator メソッドから返されるコンポーネントにキー (「key」というプロパティ) を指定する必要がありました。renderRow または renderSectionHeader にキーを追加しても何も起こりませんでしたが、renderSeparator に追加すると警告は消えました。