Я пытаюсь предоставить uuidv4 в качестве ключевой опоры в элементе списка заголовков, но он выдает мне предупреждение и запрашивает уникальный ключ в качестве опоры.

Question

      // This is my routes which I'm trying to map through 
const Header = () => {
  const routes = [
    { id: 1, name: 'Home', link: '/' },
    { id: 2, name: 'Blogs', link: '/blogs' },
    { id: 3, name: 'Contact', link: '/about' }
  ];
//Since providing index as key prop is not good I'm giving uuidv4() as key prop
 {
                routes.map(route =>
                  <li className='mr-8'>
                    <NavLink className='px-2' style={navLinkStyles} key={uuidv4()} to={route.link}>{route.name}</NavLink>
                  </li>
                )
              }

Вот что я получил в качестве предупреждения в своей консоли:

      react_devtools_backend.js:3973 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Header`. See https://reactjs.org/link/warning-keys for more information.
    at li
    at Header (http://localhost:3000/static/js/bundle.js:3874:98)
    at div
    at App
    at Router (http://localhost:3000/static/js/bundle.js:90278:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:89087:5)

Доказательство индекса в качестве ключевой опоры дает такое же предупреждение, как и uuidv4(). Что я должен дать в качестве ключевой опоры в этом случае?

Answer 1

Это правда, если у вас действительно нет способа идентифицировать элемент, вы можете использовать стратегию смешивания между библиотекой UUID и

      export const getUniqueId = () => {
    return `${uuidv4()}-${generateUniqueStringWithTimestamp()}`;
}

временная метка

      export const generateUniqueStringWithTimestamp = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hour = String(now.getHours()).padStart(2, '0');
    const minute = String(now.getMinutes()).padStart(2, '0');
    const second = String(now.getSeconds()).padStart(2, '0');
    const miliseconds = String(now.getMilliseconds());
  
    return `${year}${month}${day}${hour}${minute}${second}${miliseconds}`;
}

вы получите что-то вроде этого «4f6fdbc1-2c5d-4e64-a9e1-99878ff68e58-20230512113800865»

Помните, что с помощью библиотеки UUID вы можете создавать дубликаты, поэтому с помощью этой стратегии вы уменьшите вероятность ошибки.

Ссылка: https://www.npmjs.com/package/uuid .