Установить уникальные ключи реакции с помощью shortid.generate() таким образом?
import shortid from "shortid";
export const NavArray = [
{
to: "/Women",
text: "1",
id: shortid.generate()
},
{
to: "/Women",
text: "2",
id: shortid.generate()
},
{
to: "/Women",
text: "3",
id: shortid.generate()
},
{
to: "/Women",
text: "4",
id: shortid.generate()
}
];
Могу ли я использовать вышеуказанный метод для отображения динамических данных, таких как:
NavArray.map(val => <div key = {val.id}>{val.text}</div> )
Или я должен использовать, как показано ниже: NavArray without id key
NavArray.map(val => <div key = {shortid.generate()}>{val.text}</div> )
Любые предложения по этому поводу, действительно полезные.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Это зависит от того, чего вы хотите достичь.
Я предполагаю, что ваш метод generate дает вам какое-то случайное значение. Используя метод, указанный в вашем первом решении, этот сгенерированный идентификатор останется одинаковым для всех элементов, чего и ожидает React.
Однако второй метод будет генерировать другой идентификатор каждый раз, когда он вызывается, и может повлиять на производительность. Компонент key должен всегда оставаться неизменным, даже когда он повторно отображается, используя это решение, это не так и замедляет ваше приложение.
При рендеринге длинных списков в реакции нам нужно указать реакцию с помощью ключа, чтобы реакция сравнила новый созданный виртуальный дом с предыдущим домом. Если ключ меняется каждый раз, React не может сравнивать вновь созданный виртуальный дом с предыдущим домом. Таким образом, как правило, вы не должны изменять ключи дочерних элементов при вызове повторного рендеринга.
Ответил на ваш вопрос здесь: stackoverflow.com/a/61794896/2245264