Реагируйте на странный console.info, созданный не мной
Привет, я выполнял несколько функций для сортировки значений, полученных от API, и когда я это сделал, все было в порядке. Но через некоторое время я начал получать странные сообщения console.info, хотя у меня их нет в моем коде (удалил все после того, как все заработало). Также у меня есть сообщение о том, что я не установил ключевой атрибут, хотя и установил. Их источник также из другого компонента, я не знаю почему. Ниже я отправляю изображение и код.
render() {
const {
activeSurveys, CategoryList, IDList, activeCategory
} = this.state;
return (
<div className = "section" id = "Surveys">
<h1>
Categories of surveys
</h1>
<h4>
Choose one to fill and contribute!
</h4>
<div className = "row">
<div className = "col-sm-6">
{CategoryList.map((element, index, array) => (
<div
key = {keyIndex(array, index)[index].id} // Key creator from external library
onClick = {() => this.setActiveCategory(element)}
className = {activeCategory === element ? 'CategoryElementActive' : 'CategoryElement'}
>
{element}
</div>
))}
</div>
<div className = "col-sm-6">
<h3>
Surveys to fill
</h3>
<div className = "glyphicon glyphicon-arrow-down" />
{activeSurveys.map((element, index, array) => (
<div key = {keyIndex(array, index)[index].id}>
{element.Topic}
</div>
))}
</div>
</div>
</div>
);
}
Когда я нажимаю index.js: 22, я перехожу в файл из библиотеки индекса-ключа-реакции https://www.npmjs.com/package/react-key-index:
Я обнаружил, что проблема в создании ключа для второго списка. Вероятно, это связано с его содержанием. Первый - это массив activeSurveys, второй - CategoryList.
PS. Я новичок в React, поэтому, если я вообще что-то сделаю не так, буду благодарен за любые исправления.
Обновлено: проблема решена. В массиве activeSurveys уже было уникальное свойство ID, поэтому функция keyIndex была не только бесполезной, но и, вероятно, должна была создать ключ для свойства с другим именем. Спасибо за помощь!
Поскольку я добавил комментарий, keyIndex взят из внешней библиотеки, поэтому я не знаю его тела, вот ссылка: npmjs.com/package/react-key-index.
И действительно, мне понадобился файл index.js из этой же библиотеки, я поставлю скриншот в вопросе
Это означает, что в используемой вами библиотеке response-key-index есть дополнительный вызов console.info. Отправьте отчет об ошибке на трекер. Сообщение об ошибке - это отдельная, не связанная с этим проблема.
Проблема не в том, что вы не добавили ключ - в сообщении написано, что у каждого элемента должен быть ключ уникальный. В общем, вы можете использовать индекс в качестве ключа, если вы не собираетесь изменять элементы в массиве. См. Объяснение в reactjs.org/docs/lists-and-keys.html. Я бы посмотрел на другую библиотеку или использовал что-то уникальное из element для генерации вашего ключа - вы можете использовать что-нибудь, который уникален для элементов.
JJJ спасибо, я дам им знать
И Дэвид, я проверил это с помощью console.info, и на самом деле он создает уникальные ключи. Также я обнаружил, что во втором списке эта библиотека возвращает undefined, поэтому возникает ошибка
Вам не нужно использовать глобально уникальные ключи, но уникальные для / между дочерними элементами этого узла, достаточно использовать индекс из аргументов карты, просто key = {index}.
@xadm, когда у нас есть несколько карт в одном компоненте, возможно, ваш ответ устанавливает некоторые ключи для разных элементов. а может быть баги или нет?
Эти карты возвращают узлы, прикрепленные к разным div, я уверен, что достаточно уникальности, никаких коллизий.
@xadm, вы правы, но в любом случае мне понадобится этот идентификатор позже при перенаправлении на другой путь, поэтому я думаю, что могу использовать его здесь.
передать / использовать его как свойство id?
@xadm Я не понимаю вопроса, вы можете уточнить?
не вопрос, скорее намек;)
Ответы 1
Для использования react-key-index вы должны использовать этот код: arr = keyIndex(arr, 1);
этот код добавляет и id для простого массива и добавляет _objName для других массивов.
будьте осторожны в простом массиве:
['val1','val2']
изменил т
[
{
id: 'kRf6c2fY',
value: 'val1'
},
{
id: 'lYf5cGfM',
value: 'val2'
}
]
Так что используйте этот код:
render() {
const {
activeSurveys, CategoryList, IDList, activeCategory
} = this.state;
CategoryList = keyIndex(CategoryList, 1); // *****
activeSurveys = keyIndex(activeSurveys, 1); // *****
return (
<div className = "section" id = "Surveys">
<h1>
Categories of surveys
</h1>
<h4>
Choose one to fill and contribute!
</h4>
<div className = "row">
<div className = "col-sm-6">
{CategoryList.map((element, index, array) => (
<div
key = {element.id} // id added by keyIndex()
onClick = {() => this.setActiveCategory(element.value)} // use element.value !!!
className = {activeCategory === element.value ? 'CategoryElementActive' : 'CategoryElement'}
>
{element.value}
</div>
))}
</div>
<div className = "col-sm-6">
<h3>
Surveys to fill
</h3>
<div className = "glyphicon glyphicon-arrow-down" />
{activeSurveys.map((element, index, array) => (
<div key = {element._Topic}> // _Topic added by keyIndex()
{element.Topic}
</div>
))}
</div>
</div>
</div>
);
К сожалению, это привело к большему количеству ошибок. И хотя я вижу смысл первой замены, которую вы сделали, как работает вторая? Почему element._Topic?
Не могли бы вы вставить содержимое CategoryList в свой вопрос?
Конечно, я только что заметил, что это действительно может быть проблемой
И проблема на самом деле заключается в массиве activeSurveys, но я поставлю оба варианта
@SlawekWozniak извините. проверьте сейчас еще раз. я забыл element.value
@SlawekWozniak, так я могу удалить ответ?
@mortezaataiy Оставьте, может быть, это кому-то в будущем поможет с его проблемой :)
@SlawekWozniak, пожалуйста, дайте мне голос. сейчас его -1 :(
Мне это не помогло, и я не уверен, что это правильный ответ, зачем мне это делать?
Не могли бы вы поделиться своей функцией
keyIndex? Для console.infos, если вы нажмете наindex.js:22в отладчике, перейдете ли вы к файлу с console.info?