我正在尝试在我的 header 列表项中提供 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

您的路线有 ID，这看起来是特定路线的唯一标识符（link 可能也有效），所以请使用它。不要使用 uuid（或）作为键（除非你真的没有其他方法来识别被映射的元素），并将键放在回调直接返回的元素上。

routes.map(route =>
    <li className='mr-8' key={route.id}>
        <NavLink className='px-2' style={navLinkStyles} to={route.link}>{route.name}</NavLink>
    </li>
)

我正在尝试在我的 header 列表项中提供 uuidv4 作为关键道具，但它给了我警告并询问唯一密钥作为道具

I'm trying provide uuidv4 as key prop in my header list item but it gives me warning and asking unique key as prop

uuid

reactjs

tailwind-css

react-key-index