ОШИБКА Предупреждение: обнаружены два дочерних элемента с одним и тем же ключом, `${item}-${index}`

Я продолжаю получать эту ошибку «ОШИБКА Предупреждение: обнаружены два дочерних элемента с одним и тем же ключом, ${item}-${index}» и не знаю, почему? Как я могу это исправить? Помогите пожалуйста заранее спасибо!

    return (
        <View style={styles.container}>
            <FlatList 
                data={tabs}
                keyExtractor={(item, index) => '${item}-${index}'}
                renderItem={({ item }) => {
                    return (
                        <TouchableOpacity style={styles.pill} onPress={() => { setSelectedTab(item); }}>
                            <Text style={styles.pillText}>{item}</Text>
                        </TouchableOpacity>
                    )
                }}
            />
    
            <LinearGradient colors={['gold', '#FF7F50', '#FF7F50']} style={StyleSheet.absoluteFill}>
                <Text style={styles.title}>Main Menu Screen</Text>
                <Text style={styles.title}>{ address }</Text>
            </LinearGradient>
        </View>
        );
    };

Error: ERROR Warning: Encountered two children with the same key, ${item}-${index}.

Привет, не могли бы вы добавить кусок кода?

Joffrey K 16.05.2022 22:38

Либо вы используете одну и ту же комбинацию item/index для разных свойств, либо используете ${item}-${index} в качестве ключа для нескольких свойств. Не делай этого.

jabaa 16.05.2022 22:42

Извините, я редактировал вопрос.

Pixi 16.05.2022 22:43
'${item}-${index}' содержит строку ${item}-${index}. Заполнители не заменяются. Вам нужны обратные галочки, чтобы создать литерал шаблона `${item}-${index}`. Это либо опечатка, либо дубликат.
jabaa 16.05.2022 22:44

И как мне это сделать?

Pixi 16.05.2022 22:46

Я написал это в своем предыдущем комментарии. Вот собственно код: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

jabaa 16.05.2022 22:47

Или как исправить ошибку?

Pixi 16.05.2022 22:48

Так что мне нужно удалить строки, мой друг?

Pixi 16.05.2022 22:49

Замените '${item}-${index}' на `${item}-${index}`

jabaa 16.05.2022 22:49
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
3
9
27
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто замените '' на `` вокруг ${item}-${index}, чтобы интерполировать ваши переменные в строке. Но на самом деле вам нужно только обратиться к индексу следующим образом:

return (
        <View style={styles.container}>
            <FlatList 
                data={tabs}
                keyExtractor={(_, index) => index.toString()}
                renderItem={({ item }) => {
                    return (
                        <TouchableOpacity style={styles.pill} onPress={() => { setSelectedTab(item); }}>
                            <Text style={styles.pillText}>{item}</Text>
                        </TouchableOpacity>
                    )
                }}
            />
    
            <LinearGradient colors={['gold', '#FF7F50', '#FF7F50']} style={StyleSheet.absoluteFill}>
                <Text style={styles.title}>Main Menu Screen</Text>
                <Text style={styles.title}>{ address }</Text>
            </LinearGradient>
        </View>
        );
    };

Использование индекса в качестве ключа имеет существенные недостатки, использование составного ключа защищает от некоторых из них, даже если это требует дополнительного рендеринга.

pilchard 16.05.2022 22:56

Так что я не получаю никаких ошибок, но по какой-то причине данные не отображаются на странице.

Pixi 16.05.2022 23:03

data={tabs} не отображается на странице

Pixi 16.05.2022 23:03

@pilchard Вы правы, используя Index в качестве ключа, это анти-шаблон, но он похож на другой анти-шаблон, у которого нет реальной альтернативы в 90% случаев. Мне не нравится соединение по причинам, которые вы упомянули. Имо, использование стабильного идентификатора должно быть правильным, но если у вас его нет...

Joffrey K 16.05.2022 23:24

Что у тебя в tabs?

Joffrey K 16.05.2022 23:26

Другие вопросы по теме