警告：数组或迭代器中的每个孩子都应该有一个唯一的“key”道具。检查\`ListView\`的渲染方法

Question

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

警告：数组或迭代器中的每个孩子都应该有一个唯一的“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-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 添加键属性并不能解决问题。

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

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

原文由 delete 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我和你有一段时间 完全 一样的问题，看了上面的一些建议后，我终于解决了这个问题。

事实证明（至少对我而言），我需要为从我的 renderSeparator 方法返回的组件提供一个密钥（一个名为“密钥”的道具）。向我的 renderRow 或 renderSectionHeader 添加一个键没有做任何事情，但是将它添加到 renderSeparator 使警告消失了。

希望有帮助。

原文由 coldbuffet 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您需要提供一个 密钥。

如果您有关键属性，请尝试在您的 ListView Rows 中执行此操作：

 <TouchableHighlight key={item.key} underlayColor='#dddddd'>

如果没有，请尝试将项目添加为键：

 <TouchableHighlight key={item} underlayColor='#dddddd'>

原文由 Nader Dabit 发布，翻译遵循 CC BY-SA 3.0 许可协议