Создайте уникальный ключ для React при использовании LodashFP

Question

Я пытаюсь использовать метод map Lodash для рендеринга списка компонентов в React, но генерируемый ключ неизменно из-за способа, которым он возвращается.Есть ли какой-нибудь способ обойти это?

{map((item) => (<Item {...item} key={item.id} />), items}

Answer 1

Поскольку вы уже используете loadashFP, вы можете просто использовать _.uniqueId с префиксом:

_.uniqueId('KEY_');  // KEY_1
_.uniqueId('KEY_');  // KEY_2 etc ...

В вашем случае:

{map((item) => (<Item {...item} key={_.uniqueId('KEY_')} />), items}

Answer 2

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

Лучший способ, который я нашел, это то, что btoa(Math.random()).substring(0, 12) btoa изначально поддерживается в JS.

   console.log(btoa(Math.random()).substring(0, 12))

key = {btoa (Math.random ()). Substring (0, 12)}