Лучше использовать индекс в качестве ключа вместо Math.random () в React?

Question

Ниже приведен мой код реакции, который отображает пункты меню, и, к сожалению, у меня нет идентификатора, который можно добавить в качестве ключа в списке. Как упомянуто в документах в разделе Ключи , рекомендуется избегать Math.random(). Производительно и лучше, чем Math.random() использовать индекс в качестве ключа при отображении списка меню?

Код -

[{name: 'Home'}, {name: 'About'}, {name: 'News'}, {name: 'Contact'}].map((item, index) => {
    return `<li key=${index}>${item.name}</li>`
})

Answer 1

Проще говоря, я бы тоже не использовал.Смысл ключа в том, чтобы позволить React идентифицировать дочерние элементы <li> s, которые вы создаете во время рендеринга.

Использование случайного ключа или индекса массива не даст согласованного ключа.

Вместо этого я бы добавил идентификатор для каждого из ваших объектов ...

[
  { id: 1, name: 'Home' },
  { id: 2, name: 'About' },
  { id: 3, name: 'News' },
  { id: 4, name: 'Contact' },
].map(({ id, name }) => {
  return <li key={id}>{name}</li>
})

Таким образом, если бы вы переупорядочили массив, идентификатор последовательно идентифицировал объект.