ОШИБКА Предупреждение: обнаружены два дочерних элемента с одним и тем же ключом, `${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}.
Либо вы используете одну и ту же комбинацию item/index для разных свойств, либо используете ${item}-${index} в качестве ключа для нескольких свойств. Не делай этого.
Извините, я редактировал вопрос.
'${item}-${index}' содержит строку ${item}-${index}. Заполнители не заменяются. Вам нужны обратные галочки, чтобы создать литерал шаблона `${item}-${index}`. Это либо опечатка, либо дубликат.
И как мне это сделать?
Я написал это в своем предыдущем комментарии. Вот собственно код: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Или как исправить ошибку?
Так что мне нужно удалить строки, мой друг?
Замените '${item}-${index}' на `${item}-${index}`
Ответы 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>
);
};
Использование индекса в качестве ключа имеет существенные недостатки, использование составного ключа защищает от некоторых из них, даже если это требует дополнительного рендеринга.
Так что я не получаю никаких ошибок, но по какой-то причине данные не отображаются на странице.
data={tabs} не отображается на странице
@pilchard Вы правы, используя Index в качестве ключа, это анти-шаблон, но он похож на другой анти-шаблон, у которого нет реальной альтернативы в 90% случаев. Мне не нравится соединение по причинам, которые вы упомянули. Имо, использование стабильного идентификатора должно быть правильным, но если у вас его нет...
Что у тебя в tabs?
Привет, не могли бы вы добавить кусок кода?