[英]Error react-jsx-dev-runtime.development.js:97 Warning: Each child in a list should have a unique "key" prop
I'm telling everyone I'm putting together my first react and I'm using the materialize css to make the structure, but I did it with class and not as an arrow function, now I'm modifying it, I have the following problem I'm putting together the navbar with routes occupying the library rail-routes-dom but it gives me that error how can I remove it, and how can I build the hamburger menu, I had it running but it was built as a class.我告诉大家我正在整理我的第一个反应,我正在使用物化 css 来制作结构,但我是用类而不是箭头函数来做的,现在我正在修改它,我有以下问题我正在将导航栏与占用图书馆 rail-routes-dom 的路线放在一起,但它给了我错误我该如何删除它,以及如何构建汉堡菜单,我让它运行但它是作为一个类构建的. if you can help me thanks
如果你能帮助我,谢谢
import React from 'react';
import 'materialize-css/dist/css/materialize.css';
import logo from '../MKY.png';
import Cart from './CartWidget';
import { Link, NavLink} from 'react-router-dom';
const Navbar = () => {
const categories = [
{ name: "electronics", id: 0, route: "/category/electronics" },
{ name: "jewelery", id: 1, route: "/category/jewelery" },
{ name: "men's clothing", id: 2, route: "/category/men's clothing" },
{ name: "women's clothing", id: 3, route: "/category/women's clothing" },
];
return (
<>
<nav className='navMKY'>
<div className='nav-wrapper'>
<Link to='/' className='brand-logo'><img src={logo} className="App-logo2" alt="logo" /></Link>
<Link to="#!" data-target="mobile-demo" className='sidenav-trigger'><i className='material-icons'>menu</i></Link>
<ul className='right hide-on-med-and-down'>
<li><Link to="/">Index</Link></li>
{
categories.map((category) => <li><NavLink key={categories.id} to={categories.route}>{categories.name}</NavLink></li>)
}
<li><Link to="/cart"> <Cart NumberSell={5}/></Link></li>
</ul>
</div>
</nav>
<ul className='sidenav red ' id="mobile-demo">
<Link to='/' className='brand-logo'><img src={logo} className="App-logo2" alt="logo" /></Link>
<li><Link to="/">Index</Link></li>
{
categories.map((category) => <li><NavLink key={categories.id} to={categories.route}>{categories.name}</NavLink></li>)
}
<li><Link to="/cart"> <Cart NumberSell={5}/></Link></li>
</ul>
</>
);
}
export default Navbar;
The React key should be on the outermost element being mapped, and should reference the data from the current array being mapped. React 键应该在被映射的最外层元素上,并且应该引用正在映射的当前数组中的数据。
Example:例子:
categories.map((category) => (
<li key={category.id}> // <-- React key here, from category
<NavLink to={category.route}>
{category.name}
</NavLink>
</li>
))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.