我一直在想这个警告,但我不能让它停止。这是警告:
Warning: Each child in a list should have a unique "key" prop.
Check the top-level render call using <ul>. See https://reactjs.org/link/warning-keys for more information.
at target.default.Object.defineProperties.$$typeof.value (webpack-internal:///(rsc)/./node_modules/next/dist/build/webpack/loaders/next-flight-loader/module-proxy.js:84:27)
字符串
我跟踪了warning-keys链接,并确保每个列表元素都有一个唯一的键,但问题仍然存在。以下是我使用list的所有示例:
const MENU_LIST = [
{ text: "Stay Updated", href: "#stayupdated"},
{ text: "About Us", href: "#about"}
]
...
<ul className={styles.nav}>
<Link href={"/"}>
<li className={styles.logo} key='home'>Company</li>
</Link>
{MENU_LIST.map((item) => (
<Link href={item.href}>
<li key={item.text} className={styles.links}>{item.text}</li>
</Link>
))}
</ul>
x
const MENU_LIST = [
{ text: "About Us", href: "#about" ,},
{ text: "Stay Updated", href: "#stayupdated",},
{ text: "↑ Go Back to the Top of the Page", href: "/",}
]
...
<ul className={styles.nav}>
{MENU_LIST.map((item) => (
<Link href={item.href}>
<li key={item.href} className={styles.links}>{item.text}</li>
</Link>
))}
</ul>
<ul>
<li key='stayUpdatedDiv'> <div>...</div> </li>
<li key='stayUpdatedForm'> <form> ... </form> </li>
</ul>
的字符串
请帮助我弄清楚为什么我得到这个错误,尽管我指定了一个唯一的关键字在每个列表元素,我可以找到。它已经阻止了我在我的域上部署:(
1条答案
按热度按时间rqqzpn5f1#
您需要添加密钥-检查下面的代码。
字符串