React Native with Native Base中两个具有相同键的子代

Question

我如何解决以下错误：警告：遇到两个具有相同键[object Object]的孩子。密钥应该是唯一的，以便组件在更新期间保持其身份。非唯一键可能会导致子代重复和/或被忽略-该行为不受支持，并且可能在将来的版本中更改。

这是我的清单：

<List style={custom.PartList}>
     <FlatList extraData={this.state} data={this.state.data} keyExtractor={this._keyExtractor.bind(this)} renderItem={this._renderItem.bind(this)} />
</List>

这是我的清单项目：

   /* Render Item - Render One Row - Item - (Tool) */
    _renderItem({ item }) {
        const custom = styles(this.props);

        return (
            <View style={custom.PartView}>
                <ListItem style={custom.PartListItem} onPress={() => this._handleRead(item.tool_id, item.tool_name, item.tool_description, item.tool_count, item.tool_availability)}>
                    <Image style={custom.PartImage} source={require('@app/assets/images/tools.png')}/>
                    <Text style={custom.PartName}>{item.tool_name}</Text>
                </ListItem>
            </View>
        );
    }
    /* /Render Item - Render One Row - Item - (Tool)/ */

这就是我的keyExtractor方法：

/* Key Extractor Method - For Index Tools */
  _keyExtractor(index) {
      return index.toString();
  }
/* /Key Extractor Method - For Index Tools/ */

Answer 1

您将this绑定到keyExtractor函数，因此它将提供this对象作为第一个参数（在这里将其称为index）。因此，返回值将始终是Object（= [Object object]）

的字符串表示形式

简单的解决方案是只声明keyExtractor={this.keyExtractor}而没有任何绑定。

Answer 2

对于FlatList代码

<List style={custom.PartList}>
     <FlatList extraData={this.state} data={this.state.data}
    keyExtractor={(item, index) => index.toString()}
 renderItem={this._renderItem.bind(this)} />
</List>