[解決済み】警告。配列またはイテレータの各子供は、一意の「キー」プロパティを持つ必要があります。ListView`のレンダリングメソッドを確認する。

質問

でアプリを作りました。 ReactNative 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}
            />

    );
}

私のDataSourceは以下のような構成になっています。

    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-Rowsをレンダリングしています。

        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"-Class に key-property を追加しても、問題は解決されませんでした。

これは、"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つのキーがわかるように、各レコードはキーのプロパティを持っています。警告はまだ残っています。

どうすればいいですか？

私は まさに という問題で、上記の提案をいくつか見て、ようやく解決しました。

それは、（少なくとも私にとっては）renderSeparatorメソッドから返すコンポーネントにキー（'key'というプロップ）を供給する必要があることが判明しました。renderRowやrenderSectionHeaderにキーを追加しても何も起こらないが、renderSeparatorにキーを追加すると警告が消えた。

お役に立てれば幸いです。