警告:数组或迭代器中的每个孩子都应该有一个唯一的“键"；支柱.检查`ListView`的渲染方法 [英] Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`

问题描述

我使用 ReactNative 为 iOS 和 android 构建了一个应用程序，带有 ListView.使用有效数据源填充列表视图时，屏幕底部会打印以下警告:

I built an app with ReactNative both for iOS and android with a ListView. When populating the listview with a valid datasource, the following warning is printed at the bottom of the screen:

警告:数组或迭代器中的每个孩子都应该有一个唯一的键"支柱.检查ListView的render方法.

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of ListView.

这个警告的目的是什么?在消息之后，他们链接到这个页面，在那里讨论了完全不同的事情与 react native 无关，而是与基于 web 的 reactjs 无关.

What is the purpose of this warning? After the message they link to this page, where complete different things are discussed which have nothing to do with react native, but with web based reactjs.

我的 ListView 是用这些语句构建的:

My ListView is built with those statements:

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}
            />

    );
}

我的数据源包含如下内容:

My DataSource consists of something like:

    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 是用以下内容呈现的:

And the ListView-Rows are rendered with stuff like:

        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>
        );

一切正常并按预期进行，除了对我来说似乎完全是胡说八道的警告.

Everything works fine and as expected, except the warning which seems to be complete nonsense to me.

向我的DetailItem"类添加键属性并没有解决问题.

Adding a key-property to my "DetailItem"-Class didn't solve the issue.

这是，作为cloneWithRows"的结果，真正将传递给 ListView 的是:

This is, what really will be passed to the ListView as a result of "cloneWithRows":

_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: '[e-mail]',
I/ReactNativeJS( 1293):           headline: 'Email',
I/ReactNativeJS( 1293):           icon: 'fontawesome|envelope' },
I/ReactNativeJS( 1293):         { key: 6, type: 'moreInfo', text: '', headline: '', icon: '' } ] },

正如一个键所见，每条记录都有一个键属性.警告仍然存在.

As one key see, each record has a key property. The warning still exists.

推荐答案

我和你完全遇到了同样的问题，在看了上面的一些建议之后，我终于解决了问题.

I've had exactly the same problem as you for a while now, and after looking at some of the suggestions above, I finally solved the problem.

事实证明(至少对我而言)，我需要为我从 renderSeparator 方法返回的组件提供一个键(一个名为key"的道具).向我的 renderRow 或 renderSectionHeader 添加键没有做任何事情，但将它添加到 renderSeparator 使警告消失.

It turns out (at least for me anyway), I needed to supply a key (a prop called 'key') to the component I am returning from my renderSeparator method. Adding a key to my renderRow or renderSectionHeader didn't do anything, but adding it to renderSeparator made the warning go away.

希望有所帮助.

这篇关于警告:数组或迭代器中的每个孩子都应该有一个唯一的“键"；支柱.检查`ListView`的渲染方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！