我为iOS和安卓系统开发了一个应用程序,都有ReactNative个,有ListView个.使用有效数据源填充listview时,屏幕底部会显示以下警告:

警告:数组或迭代器中的每个子级都应具有唯一的"键"

这个警告的目的是什么?在消息之后,他们链接到this page,在this page中讨论了与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: 'xxxxxxxxx@hotmail.com',
I/ReactNativeJS( 1293):           headline: 'Email',
I/ReactNativeJS( 1293):           icon: 'fontawesome|envelope' },
I/ReactNativeJS( 1293):         { key: 6, type: 'moreInfo', text: '', headline: '', icon: '' } ] },

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

推荐答案

我有exactly个和你一样的问题已经有一段时间了,在看了上面的一些建议后,我终于解决了这个问题.

事实证明(至少对我来说),我需要为我从renderSeparator方法返回的组件提供一个键(一个称为"键"的props ).向我的renderRow或renderSectionHeader添加一个键没有任何作用,但将其添加到renderSeparator会使警告消失.

希望有帮助.

Reactjs相关问答推荐

优化、自定义登录页面、使用用户ID而不是邮箱

为什么我的标签在Redux API中不能正常工作?

如何使用皮金贴图在Reactjs中制作 map 上的点之间的线的动画?

React中的useEffect钩子

useCallback()是否应该用于作为prop传递给子组件的函数,即使该组件包装在memo()中?

如何在REACTIVE js中动态添加或删除输入字段?

react -无法获取函数的最新参数值

React组件未出现

React路由dom布局隐藏内容

为什么我的react 简单计时器项目不起作用?

React 在第一次渲染时为 null

单击按钮不会切换组件(当按钮和组件位于两个单独的文件中时)

useRef.current.value 为空值

redux 工具包使用中间件构建器函数时,必须返回一个中间件数组

React 组件列表中的第一个计时器正在获取值 NaN

基于标记名的博客详细信息分组没有发生

表单错误后 Ionic React 无法 Select 单选按钮

使用 React Router v6 监听来自不同组件的组件状态变化

下一次导出:未捕获的语法错误:标识符注册表已被声明

从其他组件切换 FieldSet