Двое детей с одним и тем же ключом в React Native с 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>