警告：flattenChildren(...)：遇到两个孩子用相同的键，答案

【问题标题】：Warning: flattenChildren(...): Encountered two children with the same key,警告：flattenChildren(...)：遇到两个孩子用相同的键，
【发布时间】：2017-12-15 01:50:28
【问题描述】：

我收到以下错误警告：flattenChildren(...)：遇到两个具有相同密钥的孩子，

使用 React Native 时，listview

这是我的代码

// Render the row for the list view
    _renderRow(rowData, sectionID, rowID, highlightRow) {
        return (
            <TouchableHighlight underlayColor={'#ccc'} onPress={() => this._onPressProject({projectName:rowID.projectName, projectId:rowID.projectId})}>
                <View>
                    <View style={styles.row}>
                        <Text style={styles.text}>{rowID.projectName}</Text>
                    </View>
                </View>
            </TouchableHighlight>
        );
    }

【问题讨论】：

标签： react-native

【解决方案1】：

您需要设置您在每一行中放置的组件的key 属性。可能可以像这样使用projectId：

_renderRow(rowData, sectionID, rowID, highlightRow) {
    return (
        <TouchableHighlight key={rowID.projectId} underlayColor={'#ccc'} onPress={() => this._onPressProject({projectName:rowID.projectName, projectId:rowID.projectId})}>
            <View>
                <View style={styles.row}>
                    <Text style={styles.text}>{rowID.projectName}</Text>
                </View>
            </View>
        </TouchableHighlight>
    );
}

【讨论】：

我这样做了，我尝试了 TouchableHighlight 和视图和文本仍然收到错误

【解决方案2】：

你需要提供key 每当循环通过一些要呈现的元素。每个key 都应该是唯一的。

“键”是创建元素列表时需要包含的特殊字符串属性。

你可以阅读更多关于key from documentation

【讨论】：

【解决方案3】：

所以这与列表视图渲染行无关，而是以下 JS 代码，不太确定为什么我应该能够将对象推送到数组中

for(j = 0; j < projectLength; j++) {
                project = projects[j];
                // Add Unique Row ID to RowID Array for Section
                rowIDs[i].push({proejctName:project.name. projectId:project.id});

                // Set Value for unique Section+Row Identifier that will be retrieved by getRowData
                dataBlob[company.id + ':' + project.id] = project;
            }

我修复了，但只是做了以下操作

rowIDs[i].push(project.name + ':' + project.id);

【讨论】：