[英]Missing "key" prop for element in array in nextjs 12.1.0 with react 18?
I create a next.js app with npx create-next-app
.我使用 npx
npx create-next-app
创建了一个 next.js 应用程序。 But When I am trying to building with running npm-run-build
.但是当我尝试通过运行
npm-run-build
时。 It gives the error.它给出了错误。 Here next version is 12.1.0 and react version is 18. But When I use same code in next old version like 12.0.10 something like that.
这里的下一个版本是 12.1.0,反应版本是 18。但是当我在下一个旧版本(如 12.0.10)中使用相同的代码时,类似的东西。 Then it gives no error.
然后它没有错误。 I thing this is the changes of next.js newer version.
我认为这是 next.js 更新版本的变化。 But What I have do?
但是我做了什么?
The errors like something it-错误就像它-
Here is index.js code-这是 index.js 代码-
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples →</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy →</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
This code is exactly template code when next app is created.这段代码正是创建下一个应用时的模板代码。 I do nothing change here.
我在这里没有做任何改变。
It looks like this is a bug within eslint, other users solved it by downgrading to a previous version (eslint-plugin-react from 7.29.0 to 7.28.0).看起来这是 eslint 中的一个错误,其他用户通过降级到以前的版本(eslint-plugin-react 从 7.29.0 到 7.28.0)解决了这个问题。github.com/yannickcr/eslint-plugin-react/issues/3215 - or you can just change the config to ignore ESLint on build in your nextjs app - nextjs.org/docs/api-reference/next.config.js/ignoring-eslint
github.com/yannickcr/eslint-plugin-react/issues/3215 - 或者您可以更改配置以在 nextjs 应用程序构建时忽略 ESLint - nextjs.org/docs/api-reference/next.config.js/ignoring -eslint
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.